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

Question

我正在使用 Javascript 在 Chrome 中操作 CSS 转换，并且我注意到当translateZ值变得太低（太远）时，元素会消失。这似乎只有在有大量元素时才会发生。

似乎这可能与z-index元素有关。

这是问题的一个例子：http: //jsbin.com/iZAYaRI/26/edit

悬停输出以查看问题。

有谁知道为什么会这样？

---

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

Answer 1

在我的情况下，它的 z 平移属性大约为零。将我的零翻译从 0 更改为 1 解决了我的问题。

原始代码在 safari 中工作：transform: scale3d(2,2,0) translate3d(0, -20px, 60px);

在 chrome 中工作的代码：转换：scale3d(2,2,1) translate3d(0, -20px, 60px);

希望对你有用。

干杯。

Answer 2

我真的不知道为什么，但设置 -webkit-perspective: 800px;解决了你的问题。这似乎是一个 Chrome 错误，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>

Answer 3

我有一个类似的问题。chrome 的渲染问题，我尝试了“-webkit-perspective: 800px”，它解决了我的问题。

谢谢 Jurgo 和 MrManSam。