3D CSS变换：translateZ导致元素在Chrome中消失

Question

我正在使用JavaScript在Chrome中操作CSS转换，我注意到当translateZ值过低（远离视角）时，元素将消失。只有在有大量元素的情况下才会发生这种情况。这似乎与元素的z-index有关。以下是问题示例：http://jsbin.com/iZAYaRI/26/edit。悬停输出以查看问题。是否有人知道为什么会发生这种情况？

更新：似乎元素实际上并没有消失，而是移动了一千像素左右。

- twiz

---

在许多3D系统中，存在“最大渲染距离”，这意味着距离超过一定距离的元素将不会被渲染。但是我做了一些研究，发现CSS 3D变换似乎没有这个限制。很奇怪。 - markasoftware

是的，如果只有一个元素，这个问题似乎不会发生。有人知道为什么会被标记为“离题”吗？ - twiz

好的，这里有更多内容：它实际上并没有消失。如果你进入你的jsbin，并且慢慢地、一点一点地向上和向下滚动，你会发现这个元素。但是这很奇怪。 - markasoftware

如果您打算建议关闭此问题，我希望您能告诉我它的问题所在。这样我就可以编辑它了。谢谢。 - twiz

我也遇到了类似的问题，我的问题链接是：https://dev59.com/SHjZa4cB1Zd3GeqPgaN3，元素在看似随机值处向上跳动。此外，我不是关闭你的问题的人。 - markasoftware

Answer 1

在我的情况下，问题出在零z轴平移属性上。将我的零平移从0更改为1解决了我的问题。

原始代码在Safari中有效：transform: scale3d(2,2,0) translate3d(0, -20px, 60px); 在Chrome中有效的代码是：transform: scale3d(2,2,1) translate3d(0, -20px, 60px); 希望对您有用。

祝好。

- Onur Dönmez

Answer 2

我曾经遇到过类似的问题。在Chrome中出现了渲染问题，我尝试使用“-webkit-perspective: 800px”解决了我的问题。

感谢Jurgo和misterManSam。

- Smokey

Answer 3

我真的不知道为什么，但是设置 -webkit-perspective: 800px; 解决了你的问题。这似乎是Chrome的一个bug，OpenLayer团队也发现了类似的问题：

这里是一个Chromium ticket。

这里有一个问题的示例（和jsFiddle）：

var m = new OpenLayers.Map('map');
m.addLayer(new OpenLayers.Layer.OSM());
m.zoomToMaxExtent();

// set to a smaller value to "fix" the page
// set to a larger number to "break" the page
var VECTOR_LAYERS_COUNT = 50;

for (var i = 0; i < VECTOR_LAYERS_COUNT; i++) {
  var layer = new OpenLayers.Layer.Vector(i, {});
  m.addLayer(layer);
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<h2>Page breaks when enlarged in Chrome.</h2>
<div id="map" style="width:1000px; height:1000px"></div>

- Jurgo Boemo