i'm a bit lost here, i'm currently testing the IE10 (10.0.9200.16384) that came with the Windows 8 Release Preview, and i'm having a very hard time. One of the things that are bugging me, is that IE doesn't seem to handle nested 3D Transforms corrently. Please see this fiddle:
http://jsfiddle.net/uUHdF/1/
There are two colored divs, a red one, and a green one rotated and translated so that it acts as the top of a cuboid, and this cuboid itself is rotated and translated too (note that i can't use transform-origin with rotate only because it is/was buggy in Webkit... just in case that might be part of a possible fix). It should look like this:
It's working as expected with Chrome and Firefox, but in IE10 the green div is missing:
Does anybody know if i'm missing something, or whether it's maybe a bug?
IE10 Does not support:
transform-style: preserve-3d;
Related
Webkit is producing blurry lines under certain conditions when transforms are applied to elements. My best guess is that it has to do with the transforms resulting in sub-pixel positioning. If I remove the transforms in these cases, the rendering is corrected. If I change the transform to transform3d, things improve slightly but its still blurry.
Here are my results:
Perfect! (no transform applied)
Blurry, and gray line shows under triangle (translate(0, -50%) applied)
Blurry, but no gray line under triangle (translate3d(0, 0, -50%) applied)
Note that the transforms are being applied on the Y parameter, and it's the top border that appears blurry. This supports my sense that it is a sub-pixel positioning/rendering issue.
I have tried coming up with the minimal code necessary for reproducing the issue, but I haven't been successful. Very strange. There must be something else contributing to it on my site, but I can't tell what it is.
Has anyone else seen this issue and therefore have thoughts on the precise cause and solution? It's happening on both Chrome and Safari, but not Firefox.
I'm experiencing an issue on Internet Explorer 10 when using CSS transform property to change the 3D perspective.
Random artifacts appear on the edge of some elements contained in the element with the perspective applied.
I've created a simple fiddle to demonstrate the issue:
http://jsfiddle.net/b9ztC/
To reproduce, just open the fiddle and try to select, click or play around with the text, this results in the following artifacts appearing/disappearing around the paragraph element:
More lines and artifacts appear in more complex scenarios, and the cause seems to be the following line of css:
transform: perspective(800px);
The only ways to solve the issue seem to be:
not to have the perspective applied to the element
setting the transform perspective to 0px
use perspective: 800px, instead of transform: perspective(800px)
The last one seems an easy solution but it doesn't work well in some scenarios, the following 3D flipping card demo for example (which has the same artifacts problem on the back of the card using IE10) doesn't play well when applying the perspective property separately from the rotation transform: http://www.cssplay.co.uk/menu/css3-3d-card.html
Have anyone experienced this issue? Is there any way to prevent this from happening?
I'd also like to know if this happens on every machine or it can be an hardware-related issue.
I'm seeing more or less the same issue, though only on the left side of the div, it changes depending on the transform. It seems to be the background bleeding through at the edges of the line.
I'm on Windows 7 x64 with an Radeon HD 4670 (Catalyst 13.1), using IE 10.0.9200.16686 (KB2870699).
The only practical workaround I've found so far is to apply the padding on the inner element, ie on the p instead of on the div. However I'm not sure whether the padding is actually the trigger, so this might not be applicable in other situations.
I try to make a flip-page effect in IE10.
Because IE10 doesn't support transform-style: preserve-3d;
i have to flip each side seperately. It works well in recent browsers but there is no perspective in IE10.
If i write perspective: 1000px; in the container(.flipper), backface-visibility/z-index is not working correctly.
Have a look at tis jsfiddle:
http://jsfiddle.net/wG6gk/2/
I have no clue why you have xpersepective in your CSS, IE10 is unprefixed in CSS, however the perspective property must have some kind of unit for the depth, perspective: 1000 won't be applied because the browser doesn't know what unit it is in, similarly like width and height, etc, you have to apply px, em, etc. The only browsers that assume units (and in pixels) on the perspective property are Webkit browsers, and only when it is inside the transform property.
If you do a little research you, Microsoft states:
The W3C specification defines a keyword value of preserve-3d for this property, which indicates that flattening is not performed. At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.
So for now, you'll just have to implement the advised fix, if you want to go down that road.
If not, you're lucky. I spent time trying to make it transition smoothly over. Originally in your fiddle, you were transforming it very awkwardly and had too many styles, in my opinion, so the techniques in this JSfiddle should help: http://jsfiddle.net/NAy2r
Explained fiddle
So basically the front content exists in the container div, while the back content exists in the back div, which exists inside the container div. This is very similar to Apple's HTML5 Card flip demo, however there is a twist when it comes to backface-visibility.
At the time that Apple relased that demo, backface-visibiity didn't work on Chrome or Firefox. Chrome had some concept of perspective, but none of backface-visibility, so when you flipped an element, you'd still see through to the back and the content of the back would show through both sides as well; However on Safari, it'd be perfect because it initially understood these concepts.
In further updates of Chrome in the months afterwards, Chrome understood the property, however it was applied literally and the back was hidden completely, regardless if you flipped it or not! What would be the point of having this property if it was going to hide the back completely no matter what? You could just apply display:none, etc, to show the back if you wanted!!
And that is where IE stands as of today, it as well doesn't recognize the 'back' of the element (an element with transform:rotateY(180deg) is considered to be the backside) like other modern browsers do. So when the element is flipped, backface-visibilty: hidden is taken literally as it was in Chrome!
So this fiddle listens on an AnimationStart event on the container div, and on the animation start, it finds the duration of the animation and it uses that to calculate halfway though the animation, so when the animation is halfway, it changes backface-visibility to visible, that way the animation smoothly transitions like it's supposed to.
This was a pain to develop, IE10 is somewhat inconsistent, as it needs time to process it the first time (probably the jQuery). Notice the relief, lack of headache and fiery red eyes. The air around you has become cooler and you can finally breathe, because now you're not alone.
Edit: I forgot to add, that if your animation or transition has a different timing, the timing in this script will have to be adjusted, as it only works with linear transitions, as of now...
I'm building a simple pure-css 'card flip' animation, it has to work in IE10, but sadly what I've written doesn't.
jsFiddle demo here or sample html zip here
I can see that backside-visibility works in IE10 from their demo here so maybe I've just overlooked something stupid, maybe a fresh pair of eyes might help!
Thanks in advance!
Well some Microsoft IE devs saw my tweet and jumped in with a fix already!
Apparently IE10 does not support preserve-3d, and they whipped up this jsFiddle demonstration
Big thanks to #reybango and #sgalineau for the help - very much appreciated.
This seems to be a duplicate of CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround
The backside-visibility is working on IE10 when it is applied to the element itself (if applied to the parent, it will not work). You should combine it in the same transform property like this:
.back{
transform : perspective(1000px) rotateY(0deg);
}
.front{
transform : perspective(1000px) rotateY(180deg);
}
I only have the backface-visibility applied to the child element, and IE10 shows the backface anyway. Removing preserve-3d defeats one of the main visual features of 3d animation, so it's not really a viable workaround.
Unfortunately the demo referred to above by #reybango and #sgalineau changes the effect appearance from a 3d rotation to a simple 2d change in width, so it's not a viable workaround either.
Bottom line is that IE10 needs to be upgraded to support the CSS 3d animation spec as written.
(This is to comment on why microsoft's 360° turn example works.)
First take a look at the example itself, MS's workaround removed the preserve-3d transform-style property from initial code.
Turns out IE10 has no support for preserve-3d, and they suggest such workaround on msdn:
http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property
With transform-style set to default 'flat' value, child elements will inherit parent rotation. Thus both card front/back are rotated to 360° (= 0°), the trick here is that back side will appear on top, because it comes later in DOM.
Just to make this a bit more apparent, I added opacity:0.5 to back-side for both examples, now you can see what's really going on:
http://jsfiddle.net/7FeEz/12/
http://jsfiddle.net/ax2Mc/71/
So the MS way will work in some scenarios, but not all without real support for preserve-3d
Here is my solution. http://jsfiddle.net/UwUry/531/
I tried on IE 11 and Chrome. It worked like a flip box.
I'm trying to make sort of flip effect using CSS3.
Here's an example: http://jsfiddle.net/MNhK7/
There is one problem though, as you can see in Chrome 19 or FF 11 the element is displaced during the transition but the end and start position is as it should be, why?
I've set transform-origin which I thought was supposed to prevent this from happening, what am I missing?
Silly me, I of course had to specify a transform-origin initially that's the same or it's animated from 50% 50%