I'm having issues with fixed positioning and 3d transforms, where elements don't appear to respect positioning and other properties when its parent element has perspective and preserve-3d applied to it:
.perspective {
transform-style: preserve-3d;
perspective: 600px;
}
Different results in Chrome and IE11 so far. I have a simple test case here: http://jsfiddle.net/brdvnaf8/
When I remove the perspective, positioning works fine. When I apply the perspective to the .parent element off all child nodes, positioning works fine. When I apply perspective to only one child node, it's not fine.
Can anyone explain how this is (or isn't) working for individually wrapped child nodes?
I am on linux machine, so I don't have IE11 browser to test, but I think I know where is the problem. If Chrome and IE11 behave differently than I suppose it is a bug in one of them. I tested on Chrome and everything is OK. It respects the W3C specification.
So where is the catch ? Some of CSS transform properties result in creation of containing block even for fixed positioned elements. So be aware of that.
Here are some of CSS propery/value pairs that create containing block even for fixed positioned elements:
will-change: transform;
transform: any value other than auto
perspective: any value other than zero(0)
transform-style: preserve-3d
I think there are some more but I don't have time to consult the spec in depth. So that is the problem I think.
Here are some blog posts about this stuff: