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 中工作的代碼：transform: 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。