-
Notifications
You must be signed in to change notification settings - Fork 3k
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
Comments
+1 for a new test, or at least a new sub-test (e.g. |
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 3.0 is about to drop at any moment and changes how detects a done slightly, we'll hold off until that comes. |
+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. |
(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 :) |
I think we can massively simplify this using the new extensions to define(['Modernizr', 'testAllProps'], function (Modernizr, testAllProps) {
Modernizr.addTest('preserve3d', testAllProps('transformStyle', 'preserve-3d'));
});
(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.) |
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! |
+1. This is really essential to have. |
+1 want... |
+1 |
there's an open PR that we're waiting on some updates for at #999 |
+1 |
Add 'transform-style: preserve-3d' test - fixes #762
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: 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. |
@drygiel @paulirish will you look into this a little? |
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. |
@patrickkettner thanks, there it is: #1116 |
+1 |
@RogerTheShrubber not sure what you are +1ing here. The original issue was fixed months ago. Could you let me know? Thanks! |
Sorry for the confusion. I'd like to see the preserve-3d test added to Modernizr. It's also a problem in IE11. |
What does 3d7d05e not fix for you? |
I thought this was fixed, is this a bug, or am I doing something wrong? I'm using Modernizr 2.7.1. |
@pocketjoso The 2-param syntax for If you like living on the edge, you could try creating a v3.0.0pre Modernizr build at http://v3.modernizr.com/download |
Add 'transform-style: preserve-3d' test - fixes Modernizr#762
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:
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
The text was updated successfully, but these errors were encountered: