I've ran into a very strange rendering behavior in Google Chrome recently. If you use the exact combination of CSS described in this fiddle (except for transition, it is just for demonstration purposes):
https://jsfiddle.net/yjtpjstx/1/
.wrapper {
perspective: 1px;
overflow: hidden;
box-shadow: 0 0 21px black;
}
.content {
backface-visibility: hidden;
}
You get elements to appear lower and to the right than they actually are. If your parent element has any perspective, any overflow (hidden, auto, scroll - they all will do) and a box shadow with a blur, and your child element has backface-visibility: hidden then everything inside that child element appears shifted down and to the right for the amount of pixels defined in parent's box shadow. Elements are actually still where they should be, they just move visually. Try clicking the button in the fiddle and mind that it's actually in the top left of parent with shadow.
Any thoughts on what the hell is going on here and how to fix it? Doesn't happen in Firefox. Temporarly I had to remove perspective but I have some animations in real situation that now look dull without the perspective. Could probably get rid of the shadow and make it some other way and I probably will since I don't think this can be fixed but I just wanted to share this with the world, brief googling doesn't seem to indicate this was encountered before.
Seems to be fixed in newer versions of Chrome.