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

Projects
None yet
@bitinn
Copy link

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

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link
Member

commented Dec 31, 2012

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

This comment has been minimized.

Copy link

commented Apr 15, 2013

+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

This comment has been minimized.

Copy link

commented Apr 20, 2013

(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

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link

commented Apr 20, 2013

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

This comment has been minimized.

Copy link

commented Jul 31, 2013

+1. This is really essential to have.

@clanam

This comment has been minimized.

Copy link

commented Jul 31, 2013

+1 want...

@adam-lynch

This comment has been minimized.

Copy link

commented Sep 16, 2013

+1

@paulirish

This comment has been minimized.

Copy link
Member

commented Sep 17, 2013

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

@WacesRedky

This comment has been minimized.

Copy link

commented Sep 20, 2013

+1

@paulirish paulirish closed this in 3d7d05e Nov 6, 2013

paulirish added a commit that referenced this issue Nov 6, 2013

Merge pull request #999 from edmellum/master
Add 'transform-style: preserve-3d' test - fixes #762
@gvsmirnov

This comment has been minimized.

Copy link

commented Nov 24, 2013

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

This comment has been minimized.

Copy link

commented Nov 24, 2013

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

@patrickkettner

This comment has been minimized.

Copy link
Member

commented Nov 24, 2013

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

This comment has been minimized.

Copy link

commented Nov 24, 2013

@patrickkettner thanks, there it is: #1116

@ghost

This comment has been minimized.

Copy link

commented Feb 14, 2014

+1

@patrickkettner

This comment has been minimized.

Copy link
Member

commented Feb 14, 2014

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

Thanks!

@ghost

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Member

commented Feb 14, 2014

What does 3d7d05e not fix for you?

@pocketjoso

This comment has been minimized.

Copy link

commented Apr 8, 2014

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

This comment has been minimized.

Copy link
Member

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

Merge pull request Modernizr#999 from edmellum/master
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
You can’t perform that action at this time.