logo标签列表

iPhone 6 Plus在横屏模式下带有选项卡和固定元素的奇怪错误

ioscssiphonecss-positionmobile-safari
7
我正在使用iPhone 6+ Safari（主要是iOS 9，尽管iOS 8也有一些小问题），在选项卡模式下遇到了一些疯狂的问题。所有固定元素在纵向和横向上都被正确地定位，但在打开一个或多个选项卡的情况下，在横向模式下它们不可见和/或偏移。即使它们不可见，它们仍然是可点击的，并且会重叠其他内容。旋转设备在一定程度上解决了这个问题，以及在选项卡之间切换。将元素位置从固定改为静态，再改回来也有所帮助。
HTML:
<html>
  <head></head>
  <body>
    <div id="application">
      <div class="outer-header">
        <div class="inner-header">
          <a id="link-test" href="#">Click me!</a>
        </div>
      </div>
    </div>
  </body>
</html>

CSS：

body {
  background: linen;
}

.outer-header {
  position: fixed;
  width: 100%;
  height: 30px;
  top: 0;
  left: 0;
  background: steelblue;
}

.inner-header {
  background: white;
}

这个应用程序非常庞大，但我已经成功地在codepen上复制了这个问题： iPhone 6 Plus position:fixed bug

直接在横屏模式下打开它并开启选项卡。

1个回答
0
如果您为应用程序元素添加样式，它将起作用。类似于这样： 

document.querySelector('#link-test')
  .addEventListener('click', 
    function(e) {
      e.preventDefault();
      alert('You did it!');
    });
body {
  background: linen;
}

#application {
  position: relative;
}

.outer-header {
  position: fixed;
  width: 100%;
  height: 30px;
  top: 0;
  left: 0;
  background: steelblue;
}

.inner-header {
  background: white;
}
<html>
  <head></head>
  <body>
    <div id="application">
      <div class="outer-header">
        <div class="inner-header">
          <a id="link-test" href="#">Click me!</a>
        </div>
      </div>
    </div>
  </body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接