7

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.

twiz
  • 9,041
  • 8
  • 52
  • 84
  • 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 Nov 05 '13 at 00: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 Nov 05 '13 at 00: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 Nov 05 '13 at 00: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 Nov 05 '13 at 15:57
  • I have also encountered a similar problem at my question here: http://stackoverflow.com/questions/19719900/element-upward-100-when-transform-changed-by-1px with the element jumping upward at a seemingly random value. And also, I'm not the one closing your question. – markasoftware Nov 05 '13 at 23:31
  • I came across this the other day, and I think it involves the same problem: http://blog.keithclark.co.uk/wp-content/uploads/2014/04/css-3d-z-order-tests/results/ – twiz Apr 30 '14 at 03:11
  • When you encounter anything like this in a browser, definitely open a ticket in their bug tracker! – trusktr Dec 24 '18 at 01:56
  • @trusktr Good point, but 5 years later, hopefully this isn't still a problem. – twiz Dec 27 '18 at 15:49
  • @twiz Unfortunately, it is still is a problem, but not easy to reproduce. I often experience glitches when I make various CSS3D scenes (f.e flickering of objects, objects close to the camera (when z position approaches the perspective value) disappearing when selecting text then reappearing moments later, etc). I've been playing with CSS3D a lot over at https://github.com/trusktr/infamous and have noticed such issues in Chrome just the other day. I've started to make examples, and at some point I'll have some that I can hopefully use to report issues with. – trusktr Dec 29 '18 at 07:25
  • @twiz In fact within the past few months, I've had simple CSS3D demos (don't remember the links at the moment) cause graphical glitches that leak out of their iframes and cause the parent iframes to get all glitched out (flickering/content disappearing); this happened on Codepen where some CSS3D pens caused the whole codepen site to glitch out. CSS3D just doesn't get the love it deserves. Seems to me the browser devs are more focused on WebGL/AR/VR/WebAssembly. I suppose eventually we'll have other HTML/JS libs that replace regular HTML entirely and have better rendering abilities. – trusktr Dec 29 '18 at 07:33

3 Answers3

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.

Onur Dönmez
  • 11
  • 1
0

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.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>
misterManSam
  • 24,303
  • 11
  • 69
  • 89
Jurgo Boemo
  • 1,690
  • 1
  • 15
  • 21
0

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

Thank you Jurgo and misterManSam.

Smokey
  • 1