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

Closed
bitinn opened this Issue Dec 4, 2012 · 21 comments

Projects

None yet
@bitinn
bitinn commented Dec 4, 2012

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
Member
stucox commented Dec 30, 2012

+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
Member

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
Member
stucox commented Apr 20, 2013

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
clanam commented Jul 31, 2013

+1 want...

@adam-lynch

+1

@paulirish
Member

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

@WacesRedky

+1

@paulirish paulirish closed this in 3d7d05e Nov 6, 2013
@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
Member

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

@patrickkettner
Member

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

Thanks!

@rogertheshrubber

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

@patrickkettner
Member

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
Member
stucox commented Apr 8, 2014

@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

@patrickkettner patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this issue Feb 22, 2015
@edmellum edmellum Add 'transform-style: preserve-3d' test - fixes #762 fb564aa
@mxklb mxklb referenced this issue in codeSessionsP2/masimapage Jan 10, 2016
Open

Browser Feature Detection / Fallback Solution #12

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment