I am using Javascript to manipulate CSS transforms in Chrome, and I've noticed that when translateZ values get too low (far away), elements will disappear. This only seems to happen if there are a large number of elements.

It seems like this might have something to do with the z-index of elements.

Here is an example of the problem:

Hover the output to see the issue.

Does anyone know why this happens?

---

Update: It seems that the element isn't actually disappearing, but is shifting a thousand pixels or so.

I am using Javascript to manipulate CSS transforms in Chrome, and I've noticed that when translateZ values get too low (far away), elements will disappear. This only seems to happen if there are a large number of elements.

It seems like this might have something to do with the z-index of elements.

Here is an example of the problem: http://jsbin./iZAYaRI/26/edit

Hover the output to see the issue.

Does anyone know why this happens?

---

Update: It seems that the element isn't actually disappearing, but is shifting a thousand pixels or so.

• javascript
• css
• z-index
• translate3d

Share Improve this question Follow edited Nov 5, 2013 at 16:20 twiz asked Nov 4, 2013 at 23:59 twiztwiz 10.7k1212 gold badges6060 silver badges8888 bronze badges 10

• 1 In many 3d systems, there is a "maximum rendering distance", which means that elements more than a certain distance away will not be rendered. But I've done a little research, and css 3d transforms doesn't seem to have that. Weird. – markasoftware Commented Nov 5, 2013 at 0:03
• Yep and if it is only one element, this problem doesn't seem to happen. Any clue why someone marked this as "off-topic"? – twiz Commented Nov 5, 2013 at 0:06
• ok, here's something more: it doesn't actually disappear. If you go into your jsbin and slowly, click by click, scroll all the way up and down, you will find the element. But it is weird. – markasoftware Commented Nov 5, 2013 at 0:08
• If you are planning to suggest this question be closed, I would appreciate it if you could tell me what is wrong with it. Then I can just edit it instead. Thanks. – twiz Commented Nov 5, 2013 at 15:57
• I have also encountered a similar problem at my question here: stackoverflow./questions/19719900/… with the element jumping upward at a seemingly random value. And also, I'm not the one closing your question. – markasoftware Commented Nov 5, 2013 at 23:31

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 1

In my case it was about zero z-translation property. changing my zero translation from 0 to 1 solved my issue.

original code worked in safari: transform: scale3d(2,2,0) translate3d(0, -20px, 60px);

code worked in chrome: transform: scale3d(2,2,1) translate3d(0, -20px, 60px);

hope works for you.

cheers.

I really don't know why, but setting -webkit-perspective: 800px; solved your issue. It seems to be a Chrome bug, also openlayer team had found something similar:

Here is a Chromium ticket.

Here is an example of the issue (and 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./ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://www.openlayers/api/OpenLayers.js"></script>
<script src="https://ajax.googleapis./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>

I had a similar issue. Rendering issue with chrome and I tried "-webkit-perspective: 800px" which solved my issue.

Thank you Jurgo and misterManSam.