如何阻止移动Safari浏览器在输入焦点上将固定位置设置为绝对位置？

免责声明 - 我了解在safari中存在固定元素的问题，并且固定元素不受支持，但现在是等等。但是我找不到解决这个确切问题的问题。如何阻止移动Safari浏览器在输入焦点上将固定位置设置为绝对位置？

鉴于简单的固定侧边栏，类似的：

.sidebar { 
    position: fixed; 
    top: 10px; 
    right: 10px; 
}

和相对长的页面，与输入元素。

当一个输入元素被聚焦时，任何固定的元素都变成绝对的 - 我明白为什么，safari试图消除视口 - 这很好，但并不总是合适的。我要求我为用户选择最好的体验（我自然最了解）。

所以这个问题..

有什么办法离开固定的元素，即使输入的元素都集中固定的吗？

我试图做一些$(window).on('scroll',魔术和定位元素手动滚动，但它对ipad的相当紧张。

来源

2016-08-17 Chris

如果您想提供您的特定场景的MCV示例，我们可以玩。这是一个已知的问题，至今为止，最好的解决方案是将该元素切换到绝对位置，并将其与JavaScript设置为完全相同，如果Safari不会破坏它：它也可能适用于如果我们在页面最顶部的字段上隐藏溢出，但是我发现这第二种方法太难懂了。 –

今天晚上我会尝试整理一个小场景。我同意这个已知的问题 - 我担心最后的决定可能很简单，手动干预并在需要时进行绝对定位 – Chris

可能出现几个SO问题的重复。有关详细信息，请参阅https://gist.github.com/avesus/957889b4941239490c6c441adbe32398#gistcomment-2193547。 –

Safari has supported position: fixed至少从版本9.2开始，但如果您遇到困难的问题，您可以通过使文档元素和主体全屏，然后使用绝对定位来完全创建固定位置效果。滚动然后发生在一些主容器元素而不是主体。使用此方法，您的“固定”元素可以存在于标记中的任何位置。

jsfiddle here

html, 
body, 
.mainContainer { 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    margin: 0; 
} 

.mainContainer { 
    overflow: auto; 
} 

.fixed { 
    position: absolute; 
    bottom: 20px; 
    left: 20px; 
}

来源

2016-08-24 16:26:20

问题指定了“关于输入焦点”，但您的示例没有提供可激活虚拟键盘的文本输入控件。在用户点击文本输入控件之前，事物会看起来很完美。 –

为了实现你的愿望，你需要你的方法改变布局的影响。而不是定位侧边栏的位置：固定您需要使用位置：在一个位置的绝对：相对容器设置为在该位置的视口的高度：相对容器，你需要另一个使用溢出YY：滚动和 - WebKit的溢出滚动：触摸

买者：我一般尽量避免使用固定在平板电脑&移动如果可能的位置虽然浏览器的支持是有的，在我的经验，这将是janky和JavaScript解决方案还有很大的提高是希望，我的第一反应就是与设计师挑战模式。如果我给出的设计包含位置固定元素，当有输入元素时，我更可能寻求设计解决方案而不是开发设计解决方案，因为您所描述的焦点问题很难规避并保持高质量的用户体验。

标记：

<div class="outer"> 
    <div class="sidebar"> 
    <ul> 
     <li>Dummy list nav or something</li> 

    </ul> 
    </div> 
    <div class="container"> 
     <input type="text" /> 
    <!-- I added 10000 inputs here as a demo --> 
</div> 
</div>

的CSS：

html,body{ 
-webkit-overflow-scrolling : touch !important; 
overflow: auto !important; 
height: 100% !important; 
} 
.outer { 
    position: relative; 
    overflow: hidden; 

/* I'm using Viewport Units here for ease, but I would more likely check the height of the viewport with javascript as it has better support*/ 
    height: 100vh; 
} 
.sidebar { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    /*added bg colour for demo */ 

    background: blue; 
} 
.container { 
    height: 100vh; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch 
} 
input { 
    display: block; 
}

这里有一个CodePen让你在你的模拟器（演示文稿视图）打开： https://codepen.io/NeilWkz/full/WxqqXj/

这里的代码编辑器视图： https://codepen.io/NeilWkz/pen/WxqqXj

来源

2016-08-26 12:19:25 NeilWkz

它不起作用。 –

嗨，布赖恩，感谢您的评论，核心机制似乎仍然在移动Safari中工作（我刚刚更改了笔链接以显示到编辑器视图。您在演示中看到的问题是什么？ – NeilWkz

视口的高度通常需要在虚拟键盘显示，旋转和地址栏出现/消失之后进行更新。只有处理调整大小和焦点事件，以及在激活焦点之前将输入控件位置移动到屏幕底部可以使iOS上的WebKit具有相同的行为因为谷歌浏览器在Android上运行良好的Safari浏览器 –

如何阻止移动Safari浏览器在输入焦点上将固定位置设置为绝对位置？

回答

相关问题