Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

@bitinn
Copy link

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
Copy link
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
Copy link
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
Copy link

+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
Copy link

(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
Copy link
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
Copy link

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
Copy link

+1. This is really essential to have.

@clanam
Copy link

clanam commented Jul 31, 2013

+1 want...

@adam-lynch
Copy link

+1

@paulirish
Copy link
Member

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

@WacesRedky
Copy link

+1

@gvsmirnov
Copy link

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
Copy link

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

@patrickkettner
Copy link
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
Copy link

@patrickkettner thanks, there it is: #1116

@ghost
Copy link

ghost commented Feb 14, 2014

+1

@patrickkettner
Copy link
Member

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

Thanks!

@ghost
Copy link

ghost commented Feb 14, 2014

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

@patrickkettner
Copy link
Member

What does 3d7d05e not fix for you?

@pocketjoso
Copy link

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
Copy link
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 pushed a commit to patrickkettner/Modernizr that referenced this issue Feb 22, 2015
patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this issue Feb 22, 2015
Add 'transform-style: preserve-3d' test - fixes Modernizr#762
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.