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

Question

免责声明 - 我知道在 safari 中存在关于固定元素的问题，并且不支持固定元素，但现在支持等等。但是我找不到解决这个确切问题的问题。

给定最简单的固定侧边栏，例如：

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

还有一个相对较长的页面，带有输入元素。

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

所以问题..

有什么方法可以让固定元素保持固定状态，即使在输入元素获得焦点时也是如此？

我试图在滚动上手动执行一些 $(window).on('scroll', 魔法和定位元素，但在 ipad 上它非常紧张。

Answer 1

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

jsfiddle here

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

.mainContainer {
  overflow: auto;
}

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

Answer 2

为了达到你想要的效果，你需要改变你的布局方式。您需要在 position:relative 容器中使用 position:absolute 而不是使用 position:fixed 定位侧边栏，该容器设置为该 position:relative 容器中视口的高度，您需要另一个 div 使用 overflow-y: scroll 和 -webkit-overflow-scrolling : touch

警告：我通常会尽可能避免在平板电脑和手机上使用固定位置，尽管有浏览器支持，但根据我的经验，它会很卡，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

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

How to stop mobile safari from setting fixed positions to absolute on input focus?

css

safari

mobile-safari