3D CSS转换:translateZ导致元素在Chrome中消失

Question

我正在使用Javascript来操纵Chrome中的CSS变换,我注意到当translateZ值太低(远处)时,元素将消失.只有在存在大量元素时才会出现这种情况.

看起来这可能与z-index元素有关.

以下是该问题的示例:http: //jsbin.com/iZAYaRI/26/edit

将鼠标悬停在输出上以查看问题.

有谁知道为什么会这样？

---

更新: 似乎该元素实际上并没有消失,而是正在移动一千个像素左右.

Answer 1

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

这是一张Chromium 票证。

这是问题的示例（和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>