iOS 输入时 fixed 元素错位

Question

.bar {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 10;
  height: 44px;
  padding-right: 10px;
  padding-left: 10px;
  background-color: white;
  border-bottom: 1px solid #ddd;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.bar-nav {
  top: 0;
}

<header class="bar bar-nav"></header>

请问问题出在哪呢？

Answer 1

记得好像是因为 屏幕变小导致的.

你可以看看 ratchet 的css 它是父层使用 fixed 解决的.

参考

Answer 2

在移动端中，尽量少用fixed来解决问题，可以用absolute来布局

Answer 3

原因很簡單，fixed 元素在輸入框獲得焦點時，會變成 absolute，而相對位置保持不變，又因爲發生了滾動，所以錯位。

法一：只要在獲取焦點時去掉 fixed 即可。

法二；使用 -webkit-sticky

Answer 4

题主解决了没 我现在遇到同样的问题