iOS9移动safari景观css bug与位置:固定;

前端之家收集整理的这篇文章主要介绍了iOS9移动safari景观css bug与位置:固定;前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我用iOS9手机游戏iPhone6sPlus检查了这个bug.

当横向模式下显示safari的选项卡时,我无法触摸固定元素.当隐藏选项卡时,我可以触摸它.

>在iOS9移动野生动物园景观中显示my demo.

>仅在标签栏可见时成功重现,

>向下滚动,直到隐藏选项卡.
>触摸固定元素.
>向上滚动,直到显示选项卡.
>也许你不能触摸固定元素.

你知道这个bug吗?

当我的笔上显示标签时,请尝试触摸.
http://s.codepen.io/geckotang/debug/yYZmoe

这是我无法触摸元素时的屏幕截图.

我的朋友在youtube记录了这个错误

另外这是我的代码.

<!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>

解决方法

我在iPhone 6S Plus上运行iOS 9.3.1,我也看到了这个问题.在尝试了大量的代码解决方法之后,我无法解决此问题或找到解决方法.如上所述,只有当标签栏在浏览器上可见时才会出现,只要向下滚动页面并且标签栏消失,渲染就会按预期工作.当您向上滚动到页面顶部时,触摸区域会向下偏移您之前向下滚动到的页面数量.

需要注意的是,这不会影响屏幕元素在固定位置的可见渲染,只影响与其关联的触摸区域.

猜你在找的iOS相关文章