前端遇到一个现代浏览器显示不一致的问题，是不是 safari 的 bug？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1553 天前的主题，其中的信息可能已经有所发展或是发生改变。

以下这个小 demo，在 safari 和 chrome/firefox 下表现不同。

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    html,body{
      overflow-x: hidden;
    }
    #parent1{
      position:relative;
      z-index:1
    }
    #child1{
      background-color:brown;
      position:fixed;
    }
    #parent2{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
    }
    #child2{
      position: relative;
    }

  </style>
</head>

<body>
  <div id="parent1">
    <div id="child1">1111111</div>
  </div>
  <div id="parent2">
    <div id="child2"></div>
  </div>
</body>
</html>

部分浏览器测试结果如下：

windows 10 chrome 80.0.3987.87 （ 64 位） “111111” 内容可见
windows 10 firefox 72.0.2 (64 位) “111111” 内容可见
mac os 10.14.3 safari 12.0.3 “111111” 不可见
ios 13.3.1 safari “111111”不可见

另外在 safari 下去掉 child2 元素，111111 也可见。个人是觉得 safari 表现不正常。

2 条回复 • 2020-02-12 13:09:15 +08:00

wanguorui123

2020-02-12 11:33:43 +08:00

safari 一堆 bug，渲染图片，自带的播放器都有一些兼容性问题

oubenruing

2020-02-12 13:09:15 +08:00

@wanguorui123 头大。。