Why is backface-visibility hidden not working in IE10 when perspective is applied to parent elements?

by

I came up against this glitch too and it is definitely a glitch.

The workaround is to apply the perspective transform on the child element. I updated your fiddle here: http://jsfiddle.net/jMe2c/

.item {
    backface-visibility: hidden;
    transform: perspective(200px) rotateX(0deg);
}
.container:hover .item {
    transform: perspective(200px) rotateX(180deg);
}

(See also answer at https://stackoverflow.com/a/14507332/2105930)

I think it is because in IE 10, parent element 3d-properties do not propagate to the child element. This is a known unsupported feature. Check out http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property:

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 the Microsoft-recommended solution is to propagate your 3d properties yourself, manually.

More Related Contents:

  1. CSS transform doesn’t work on inline elements
  2. How to apply multiple transforms in CSS?
  3. Remove IE10’s “clear field” X button on certain inputs?
  4. Rotated elements in CSS that affect their parent’s height correctly
  5. Why does applying a CSS-Filter on the parent break the child positioning?
  6. Prevent flicker on webkit-transition of webkit-transform [duplicate]
  7. Why does order of transforms matter? rotate/scale doesn’t give the same result as scale/rotate
  8. CSS 3d transform doesn’t work if perspective is set in the end of property
  9. Hover effect : expand bottom border
  10. Simulating transform-origin using translate
  11. How to prevent Webkit text rendering change during CSS transition
  12. Spin or rotate an image on hover
  13. CSS Transform Skew [duplicate]
  14. How can I apply multiple transform declarations to one element?
  15. How can I use CSS3 transform on a span?
  16. rotate3d shorthand
  17. Flex auto margin not working in IE10/11
  18. CSS3 transform order matters: rightmost operation first
  19. Why is text getting blurry and wobbles during 2d scale transform
  20. CSS3 transform on click using pure CSS
  21. Flip a 3D card with CSS
  22. CSS3 Transform affecting other elements with chrome/safari
  23. Make CSS3 triangle with linear gradient
  24. CSS3 – 3D Flip Animation – IE10 transform-origin: preserve-3d workaround
  25. 3d transforms on SVG element
  26. placing background image in a rhombus shaped container is causing the container to lose its shape
  27. CSS Transform with element resizing
  28. perspective and translateZ moves diagonally
  29. webkit transform blocking link
  30. Why does enabling hardware-acceleration in CSS3 slow down performance?

Leave a Comment