html – 3D变换z-index用firefox打破,保存 – 3d不保存

概述Firefox中的3D转换似乎与z-index有关.在我看来,渲染是“忽略”3D Z位置,只是使用DOM的z-index.令人感兴趣的是,当可见部分变得较小时,使得只有一部分轮可见,则z指数突然正确,尽管其他工件开始出现. 这个交叉口bug演示自2011年以来在Firefox中被发现,但是我的圈子并不相交 – 所以我希望它在某种程度上是可能的. http://jsfiddle.net/yNfQX/ firefox中的3D转换似乎与z-index有关.在我看来,渲染是“忽略”3D Z位置,只是使用DOM的z-index.令人感兴趣的是,当可见部分变得较小时,使得只有一部分轮可见,则z指数突然正确,尽管其他工件开始出现.

这个交叉口BUG演示自2011年以来在firefox中被发现,但是我的圈子并不相交 – 所以我希望它在某种程度上是可能的.
http://jsfiddle.net/yNfQX/21/

firefox BUGtracker：https://bugzilla.mozilla.org/show_bug.cgi?id=689498

.perspective {  wIDth: 400px;  height: 400px;  position: relative;  perspective: 3000px;  display: block;}.dcw {  wIDth: 100%;  height: 100%;  position: absolute;  transform-style: preserve-3d;}.dc {  top: calc(50% - 44px);  left: calc(50% - 44px);  margin: auto;  border-radius: 50%;  position: absolute;  cursor: pointer;  transform-style: preserve-3d;  wIDth: 88px;  height: 88px;  border: 1px solID black;}

<div >  <div >    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>    <div  ></div>  </div></div>

Jsfiddle：
https://jsfiddle.net/gvquf0g6/

它应该如何(从Chrome截图)：

z-index问题(firefox的屏幕截图)：

人工制品问题,以及使用部分可见轮廓的z-index(firefox的截图)：

将鼠标移动到工件上(缺少的块)会在首次渲染时将它们按原样填满.

解决方法 不幸的是,循环层的z顺序不正常.这是一个已知的问题,firefox目前无法处理.这是一个旧的firefox错误,您无法修复它,直到他们修复浏览器中的错误. 总结

以上是内存溢出为你收集整理的html – 3D变换z-index用firefox打破,保存 – 3d不保存全部内容，希望文章能够帮你解决html – 3D变换z-index用firefox打破,保存 – 3d不保存所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。