JS feature detect preserve-3d property support for nested elements

Question

Anyone knowing if it's possible and if so how can I detect if preserve-3d property fully supported?

By that I mean 3D positioning of nested element relative to it's 3D positioned parent all with CSS3 transforms.

The reason I ask is IE10, it has very limited support for preserve-3d. It doesn't account for nested elements (they get positioned relative to viewport as their parents do) and also it has problem with layering elements depending on Z axis (far'er Z element overlaps the near'er element if it's below in the DOM).

So far decision was to go with browser engine detection, but it would be much greater if I could fine-pick the very property itself!

Thank you!

Answer 1

Well, I wouldn't bother too much with this. As far as I know IE is so far the only CSS 3D Transform supporting browser that doesn't support preserve-3d, however I can understand that you want to avoid having to update lots of sites once IE supports it (even if by that time your Autonomous Robot Butler will be able to do that for you).

So, for something that actually tests the support you might want to give this Modernizr test a try:

Tests for "preserve-3d" are not working on Android (via Browserstack)?

http://jsfiddle.net/wsqSw/