ios – iPhone 6 Plus横向模式中的奇怪错误,带有标签和固定元素

我有一些疯狂的问题iPhone 6 Safari(主要是iOS 9,虽然iOS 8也有一些小故障),标签模式打开.所有固定元素都以纵向和横向正确定位,但在横向模式下不可见和/或移动,并打开一个或多个标签.即使它们不可见,它们仍然可以点击并与其他内容重叠.旋转设备在一定程度上解决了问题,以及在标签之间切换.将元素位置从固定设置为静态和背面也有帮助.

@L_502_0@：

<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

使用选项卡直接在横向打开它.

解决方法

如果向应用程序元素添加样式将起作用.像这样的东西：

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>

ios – iPhone 6 Plus横向模式中的奇怪错误,带有标签和固定元素

解决方法

相关文章