search

deathcap / gl-css3d

sync CSS 3D transformations to a WebGL scene
http://deathcap.github.io/gl-css3d
MIT License
33 stars 6 forks source link

CSS element becomes invisible if rotated too far on Chrome, works on Safari #3

Open deathcap opened 9 years ago

deathcap commented 9 years ago

screen shot 2015-02-15 at 7 11 24 pm

Chrome left, Safari right

Dragging the mouse up-right to rotate. Safari has no problem continuing to show the CSS element as it is rotated further, but in Chrome it disappears, slightly after the position where this screenshot is taken (left)

Testing with SHOW_GL_PLANE = true, reveals that in Chrome the GL element is visible, but in Safari it always remains below the CSS element:

screen shot 2015-02-15 at 7 14 48 pm

however, even with no GL element the CSS element still becomes invisible on Chrome

deathcap commented 9 years ago

Looks like this is specific to iframes at a certain angle in Chrome. Renders OK:

<div style="-webkit-transform-style: preserve-3d; transform-style: preserve-3d; overflow: hidden; pointer-events: none; position: absolute; z-index: 1; top: 0px; left: 0px; margin: 0px; padding: 0px; -webkit-perspective: 1098.46717087976px; perspective: 1098.46717087976px; width: 1024px; height: 910px;">
  <div style="position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; pointer-events: auto; width: 1024px; height: 910px; -webkit-transform: translateZ(1098.46717087976px) matrix3d(0.00176642544101924, 0.000433619803516194, -0.000711627071723341, 0, 0.000371911562979221, 0.00131268834229559, 0.00172303966246545, 0, -0.391672998666763, 0.77069765329361, -0.502610683441162, 0, 0, 0, -4.59003210067749, 1); transform: translateZ(1098.46717087976px) matrix3d(0.00176642544101924, 0.000433619803516194, -0.000711627071723341, 0, 0.000371911562979221, 0.00131268834229559, 0.00172303966246545, 0, -0.391672998666763, 0.77069765329361, -0.502610683441162, 0, 0, 0, -4.59003210067749, 1);">
    <iframe src="http://browserify.org" style="width: 100%; height: 100%;">
    </iframe>
  </div>
</div>

rotating slightly, iframe becomes invisible:

<div style="-webkit-transform-style: preserve-3d; transform-style: preserve-3d; overflow: hidden; pointer-events: none; position: absolute; z-index: 1; top: 0px; left: 0px; margin: 0px; padding: 0px; -webkit-perspective: 1098.46717087976px; perspective: 1098.46717087976px; width: 1024px; height: 910px;">
  <div style="position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; pointer-events: auto; width: 1024px; height: 910px; -webkit-transform: translateZ(1098.46717087976px) matrix3d(0.00175775436218828, 0.00044993232586421, -0.000722881173714995, 0, 0.000392798974644392, 0.00127339991740882, 0.00174771167803556, 0, -0.397632151842117, 0.781812608242035, -0.480268239974976, 0, 0, 0, -4.59003210067749, 1); transform: translateZ(1098.46717087976px) matrix3d(0.00175775436218828, 0.00044993232586421, -0.000722881173714995, 0, 0.000392798974644392, 0.00127339991740882, 0.00174771167803556, 0, -0.397632151842117, 0.781812608242035, -0.480268239974976, 0, 0, 0, -4.59003210067749, 1);">
    <iframe src="http://browserify.org/" style="width: 100%; height: 100%;">
    </iframe>
  </div>
</div>

changing iframe to div, renders ok again:

<div style="-webkit-transform-style: preserve-3d; transform-style: preserve-3d; overflow: hidden; pointer-events: none; position: absolute; z-index: 1; top: 0px; left: 0px; margin: 0px; padding: 0px; -webkit-perspective: 1098.46717087976px; perspective: 1098.46717087976px; width: 1024px; height: 910px;">
  <div style="position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; pointer-events: auto; width: 1024px; height: 910px; -webkit-transform: translateZ(1098.46717087976px) matrix3d(0.00175775436218828, 0.00044993232586421, -0.000722881173714995, 0, 0.000392798974644392, 0.00127339991740882, 0.00174771167803556, 0, -0.397632151842117, 0.781812608242035, -0.480268239974976, 0, 0, 0, -4.59003210067749, 1); transform: translateZ(1098.46717087976px) matrix3d(0.00175775436218828, 0.00044993232586421, -0.000722881173714995, 0, 0.000392798974644392, 0.00127339991740882, 0.00174771167803556, 0, -0.397632151842117, 0.781812608242035, -0.480268239974976, 0, 0, 0, -4.59003210067749, 1);">
    <div style="background-color: red; width: 100%; height: 100%;">
    </iframe>
  </div>
</div>

and even an iframe with a data URL:

<div style="-webkit-transform-style: preserve-3d; transform-style: preserve-3d; overflow: hidden; pointer-events: none; position: absolute; z-index: 1; top: 0px; left: 0px; margin: 0px; padding: 0px; -webkit-perspective: 1098.46717087976px; perspective: 1098.46717087976px; width: 1024px; height: 910px;">
  <div style="position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; pointer-events: auto; width: 1024px; height: 910px; -webkit-transform: translateZ(1098.46717087976px) matrix3d(0.00175775436218828, 0.00044993232586421, -0.000722881173714995, 0, 0.000392798974644392, 0.00127339991740882, 0.00174771167803556, 0, -0.397632151842117, 0.781812608242035, -0.480268239974976, 0, 0, 0, -4.59003210067749, 1); transform: translateZ(1098.46717087976px) matrix3d(0.00175775436218828, 0.00044993232586421, -0.000722881173714995, 0, 0.000392798974644392, 0.00127339991740882, 0.00174771167803556, 0, -0.397632151842117, 0.781812608242035, -0.480268239974976, 0, 0, 0, -4.59003210067749, 1);">
    <iframe src="data:text/html,<body bgcolor=purple>" style="width: 100%; height: 100%;">
    </iframe>
  </div>
</div>

but as soon as I change it to an http url, it disappears. Actually it seems Chrome begins to render the frame briefly, but then when the page loads, hides the element (?). This effect is most clear with src="https://rawgithub.com/".

deathcap commented 9 years ago

http://crbug.com/116554 webkit-perspective breaks on iframe