Detect "transform-style: preserve-3d" support, or update csstransforms3d for IE10 ?

[bitinn]

Didn't find a report for this issue, apologize if dup.

This is a problem because IE10 comes out with strong supports for most transform properties/functions (un-prefixed), but a heart-breaking exception:

transform-style: preserve-3d;

It only supports the default 'flat' value, so unlike Opera or IE9, 3d transforms does not fallback gracefully, but animate incorrectly if any part of rules require child rotating relative to parent (e.g. rotate3d on both parent and child).

I am not sure whether updating csstransforms3d (currently only check for perspective support, which IE10 does support) or creating a new test is more appropriate, but this gist seems to be a good starting point:

https://gist.github.com/4123325

reference:
http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property
http://www.webkit.org/blog-files/3d-transforms/transform-style.html

[stucox]

+1 for a new test, or at least a new sub-test (e.g. csstransform3d.preserve3d) - it'd be unfair on IE10 to brand it as not supporting 3D transforms, yet this sounds like a major enough barrier to warrant detection.

[ryanseddon]

Hmm interesting I had no idea IE10 didn't support that. I think a new test that either hangs off of the existing property, like @stucox mentions above, or just name a new feature detect all together. I'm leaning towards a new test as we can avoid new Boolean ctor ugliness.

3.0 is about to drop at any moment and changes how detects a done slightly, we'll hold off until that comes.

[angryobject]

+1 for this issue. Missing it so much. And the gist mentioned above seem not to work for me - Chrome reports false, while it supports this feature. Although, Firefox reports true as expected.

[SilentImp]

(function getPerspective(){
  var element = document.createElement('p'),
      html = document.getElementsByTagName('HTML')[0],
      body = document.getElementsByTagName('BODY')[0],
      propertys = {
        'webkitTransformStyle':'-webkit-transform-style',
        'MozTransformStyle':'-moz-transform-style',
        'msTransformStyle':'-ms-transform-style',
        'transformStyle':'transform-style'
      };

    body.insertBefore(element, null);

    for (var i in propertys) {
        if (element.style[i] !== undefined) {
            element.style[i] = "preserve-3d";
        }
    }

    var st = window.getComputedStyle(element, null),
        transform = st.getPropertyValue("-webkit-transform-style") ||
                    st.getPropertyValue("-moz-transform-style") ||
                    st.getPropertyValue("-ms-transform-style") ||
                    st.getPropertyValue("transform-style");

    if(transform!=='preserve-3d'){
      html.className += 'no-preserve-3d';
    }
    document.body.removeChild(element);

})();

May work :)

[stucox]

I think we can massively simplify this using the new extensions to testAllProps() currently sitting on the supports branch:

define(['Modernizr', 'testAllProps'], function (Modernizr, testAllProps) {
  Modernizr.addTest('preserve3d', testAllProps('transformStyle', 'preserve-3d'));
});

true in Chrome 26.0, false in IE10...

(Sorry, this new API hasn't really been publicised yet, we're still working out the details, but essentially the plan is to allow a specific value of a property to be tested, with syntax similar to that above. Property names are still automatically prefixed. It'll use native feature detection where available.)

[angryobject]

Thanks guys!

@SilentImp Yeah, this seems to be working)

@stucox Didn't know about this api, thanks! Although, it didn't work for me now, probably because i'm using the version off the main branch, which i took from the site. But i'll look into it, thanks!

[magnusvk]

+1. This is really essential to have.

[clanam]

+1 want...

[adam-lynch]

+1

[paulirish]

there's an open PR that we're waiting on some updates for at #999

[WacesRedky]

+1

[gvsmirnov]

There is a peculiar case of when the browser reports that it "supports" preserve-3d, but actually doesn't. Reproduces on most linux machines in Google Chrome.

The thing is that it does not render preserve-3d on some hardware.

See this test case:
http://jsfiddle.net/bZ5sE/3/ -- on my machine (see the configuration here: jmpressjs/jmpress.js#133) it says "Looks like we have preserve-3d support - you should see red text below", but the red text itself is not visible.

I do realize that this is likely a bug to be reported to Webkit/Chromium, but it could take ages before it's fixed, and everyone has updated. So a workaround is a good idea.

[gvsmirnov]

@drygiel @paulirish will you look into this a little?

[patrickkettner]

Would you mind opening up a new issue so we don't loose track of your comments?

That being said, I am assuming you are hitting places where either chrome doesn't support the GPU, or the GPU is crashing whilst rendering.

[gvsmirnov]

@patrickkettner thanks, there it is: #1116

[ghost]

+1

[patrickkettner]

@RogerTheShrubber not sure what you are +1ing here. The original issue was fixed months ago. Could you let me know?

Thanks!

[ghost]

Sorry for the confusion. I'd like to see the preserve-3d test added to Modernizr. It's also a problem in IE11.

[patrickkettner]

What does 3d7d05e not fix for you?

[pocketjoso]

Modernizr.testAllProps('transformStyle', 'preserve-3d')
falsely reports true for me in IE 11(.0.9600).

I thought this was fixed, is this a bug, or am I doing something wrong? I'm using Modernizr 2.7.1.

[stucox]

@pocketjoso The 2-param syntax for testAllProps() doesn't work in v2.x I'm afraid, it only comes in with v3.0.0.

If you like living on the edge, you could try creating a v3.0.0pre Modernizr build at http://v3.modernizr.com/download