7

i'm a bit lost here, i'm currently testing the IE10 (10.0.9200.16384) that came with the Windows 8 Release Preview, and i'm having a very hard time. One of the things that are bugging me, is that IE doesn't seem to handle nested 3D Transforms corrently. Please see this fiddle:

http://jsfiddle.net/uUHdF/1/

There are two colored divs, a red one, and a green one rotated and translated so that it acts as the top of a cuboid, and this cuboid itself is rotated and translated too (note that i can't use transform-origin with rotate only because it is/was buggy in Webkit... just in case that might be part of a possible fix). It should look like this:

It's working as expected with Chrome and Firefox, but in IE10 the green div is missing:

Does anybody know if i'm missing something, or whether it's maybe a bug?

ndm
  • 59,784
  • 9
  • 71
  • 110

1 Answers1

6

IE10 Does not support:

transform-style: preserve-3d;
  • 2
    Hmpf... now that's some serious drawback <_< With this hint in mind i've found the following: http://goo.gl/cw4Uy So the only workaround is to apply the parents transform to all of the childs additionally to their normal transform - hooray. How could I be so foolish, I really thought these days were finally gone, but apparently Microsoft doesn't want to break with the practice of the IE special treatment. – ndm Sep 27 '12 at 09:43
  • However, enough with the rant, thanks for the answer, and for anyone interested in it, here's the working workaround: http://jsfiddle.net/uUHdF/2/ It must be applied to IE only, otherwise it might trigger the transform-origin bug that's present in some webkit versions: https://bugs.webkit.org/show_bug.cgi?id=88587 – ndm Sep 27 '12 at 09:43
  • He's right. http://msdn.microsoft.com/en-us/library/ie/hh772282(v=vs.85).aspx MSDN only lists "flat" as the possible value for `transform-style` so far. That's disappointed me, too. – caiosm1005 Mar 29 '13 at 01:06
  • 1
    Could you elaborate on your solution? Just removing the transform-style from the parent objects is not all I suppose. How to go about this when using Three.JS for example, which will nest the objects for you? – Micros Dec 04 '13 at 18:17
  • 1
    This is more than just annoying. This is a serious defect, which is still present in IE11. – Andrew Gee Apr 23 '14 at 08:20