3D CSS transform: translateZ causes elements to disappear in Chrome

Question

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.com/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.

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