iOS9移动Safari横屏下使用position:fixed;时的CSS bug

9

我在使用iOS9移动safari的iPhone6sPlus时,发现一个bug。

当safari选项卡处于横屏模式下,并且固定元素不可触摸。而当选项卡隐藏时,可以触摸它。

  1. 在 iOS9 移动safari 的横屏模式下,打开 我的演示Demo
    • 只有在选项卡栏可见时才能成功重现。
  2. 向下滚动直到选项卡被隐藏。
  3. 触摸固定元素。
  4. 向上滚动直到选项卡显示出来。
  5. 此时你可能无法触摸固定元素了。

你知道这个bug吗?

请尝试在我的笔记本电脑上触摸选项卡显示的时候。 http://s.codepen.io/geckotang/debug/yYZmoe

这是当我不能触摸元素时的截图。

landscape mode

此外,我的朋友还在youtube上记录了这个bug。

这是我的代码。

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fixed {
  display: block;
  position: fixed;
  top: 0px;
  right: 0px;
  width: 100px;
  height: 100px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: tomato;
}
</style>
</head>
<body>
  <a href="javascript: void(0);" class="fixed">link</a>
  The quick brown fox jumps over the lazy dog.<br>
  The quick brown fox jumps over the lazy dog.<br>
  The quick brown fox jumps over the lazy dog.<br>
  The quick brown fox jumps over the lazy dog.<br>
  The quick brown fox jumps over the lazy dog.<br>
  The quick brown fox jumps over the lazy dog.<br>
  The quick brown fox jumps over the lazy dog.<br>
  ...
</body>
</html>

在 iOS 模拟器 9.0 - iPhone 6s / iOS 9.0 上无法复现。 - Alexander O'Mara
真的吗?我在iPhone 6sPlus / iOS9.1上检查过了。谢谢你教我。 - GeckoTang
1
仅在标签栏可见的情况下成功重现,没有其他配置。当标签栏在屏幕上滚动时,触摸点会获得垂直偏移。这绝对是 iOS 的一个 bug,应该提出一份报告。目前没有明显的解决方法,或许可以在滚动停止时删除并重新添加该元素? - Brian Nickel
仍然无法在iOS模拟器 - iPhone 6s Plus / iOS 9.1中重现。这很奇怪。虽然我在模拟器中看到过固定元素的奇怪行为,但这不会是第一次。这在真实设备上已经确认了吗? - Alexander O'Mara
模拟器一直无法模拟问题。我现在正在尝试修复同样的问题。如果有进展,我会在这里报告。 - Matt
这个问题已经在iOS 10.3上得到了修复。 - GeckoTang
1个回答

2
我在iPhone 6S Plus上运行iOS 9.3.1,也遇到了这个问题。尝试了许多代码解决方法后,我无法解决或找到解决方法。如上所述,只有在浏览器上可见的选项卡时才会发生此问题,一旦您向下滚动页面并且选项卡消失,渲染效果就会按预期工作。当您向上滚动到页面顶部时,触摸区域会向下偏移与之前向下滚动的页面量相同。

请注意,这不会影响屏幕元素的可见渲染位置,仅会影响与其相关联的触摸区域。

1
谢谢您关注最新的iOS。我的朋友向苹果报告了这个问题,但是它还没有得到修复。 - GeckoTang
2
我实际上又缩小了范围。由于选项卡栏只在iPhone 6 Plus或6S Plus上可见,所以这个问题不会影响其他任何手机型号,但可能会影响到iPad,我还没有进行测试。此外,如果有人在Safari应用程序设置中关闭了选项卡栏,他们就看不到它。非常狭窄的条件:iPhone 6/6S Plus、横屏模式,在屏幕向下滚动并返回页面后,只有在选项卡栏可见时才出现。 - Adam Roberts
只是想要添加到混合中...我可以确认这个问题确实存在于运行iOS 9.3.4的标准iPhone 6(非plus版本)上。可见渲染是正确的,触摸区域偏移(错误)。非常棘手的问题,因为我也尝试过各种技巧来强制重绘、触发滚动事件等,但还没有成功。 - bshow
...它仍然存在于iOS 10中。 - albuvee

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