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 bug，也是openlayer团队发现了类似的东西：

这是Chromium ticket。

以下是问题的示例（和jsFiddle）：

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 3

我有一个类似的问题。 chrome出现渲染问题，我尝试使用“ -webkit-perspective：800px”解决了我的问题。

谢谢Jurgo和misterManSam。

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

3 个答案: