css z-index和translate 3d在chrome和safari中不一样

91zkwejq 于 2023-05-19 发布在其他

关注(0)|答案(1)|浏览(165)

我遇到了一个浏览器兼容的问题，并发现这是由谷歌Chrome和Safari处理z索引和翻译3D不同。我在这里举一个最小的例子：

<div>
  <div style="background-color: blue; height: 100px; width: 100px; position: absolute; transform: translate3d(10px, 10px, 10px)"></div>
  <div style="background-color: red; height: 100px; width: 100px; position: relative; z-index: 1"></div>
</div>

这个简短的html，在Safari和Google Chrome中显示不同。
我可以知道哪一个是期望的行为吗？如何正确使用z-index和transform？
我尝试了不同的浏览器，并做了一个最小的例子。

css

来源：https://stackoverflow.com/questions/76248303/z-index-and-translate-3d-not-work-the-same-in-chrome-and-safari

1条答案

按热度按时间

bvuwiixz1#

Safari在浏览器中也将translate 3d属性作为一个图层使用，并且它具有这种不同的显示方法，因此如果您将元素与z-index和其他元素与translateZ一起放置，translateZ或translate 3d将在z-index元素上工作
因此，为了避免safari的问题，我建议您使用translateY和translateX方法，如下面的注解所示，或者将translateZ设置为与设置z-index相同
以下是关于Safari的更多信息：https://bugs.webkit.org/show_bug.cgi?id=61824
示例：

.box {
  height: 100px;
  width: 100px;
}

.blue {
  background-color: blue;
  position: absolute;
  /** this works in safari **/
  transform: translateY(10px) translateX(10px);

  transform: translate3d(10px, 10px, 10px);
}

.red {
  background-color: red;
  position: absolute;
  
  /** this desn't work in safari */
  /** transform: translate3d(0, 0, 9px); */
  
  /** need this to work with safari */
  /** transform: translate3d(0, 0, 11px); */

  z-index: 1;
}

<div>
  <div class="box blue"></div>
  <div class="box red"></div>
</div>

赞(0）回复(0）举报 2023-05-19

我来回答

css z-index和translate 3d在chrome和safari中不一样

1条答案

相关问题

热门标签

最新问答