Bug in CSS3 rotateY transition on Safari?

by

As far as I can tell it’s a bug, yes, Safari is rendering intersection where it shouldn’t.

For some time I thought Safari is doing it right by always rendering intersection of elements, but as far as I understand the specs, only elements in the same 3d rendering context should intersect, and that would be children of elements with a transform-style of preserve-3d.

So far the only workaround I found (only tested on Windows yet where Safari shows the same behaviour) is to translate the underlying elements away on the z-axis. Without perspective being applied it won’t actually translate, but Safari/Webkit seems to think it does (which probably is because it mistakenly treats the element as if it were in the same 3d rendering context as the actually transformed dialog) and so the elements do no longer intersect.

.effeckt-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);

    -webkit-transform: translateZ(-1000px);
}

http://jsfiddle.net/eJsZx/5/

More Related Contents:

  1. How can I transition height: 0; to height: auto; using CSS?
  2. Transitions on the CSS display property
  3. Using CSS for a fade-in effect on page load
  4. is there a css hack for safari only NOT chrome?
  5. How to remove the border highlight on an input text element
  6. :not() selector not behaving the same between Safari and Chrome/Firefox
  7. Hover effect : expand bottom border
  8. Is there a CSS hack to affect Safari only NOT Chrome?
  9. CSS transition shorthand with multiple properties?
  10. Spin or rotate an image on hover
  11. Expand div from the middle instead of just top and left using CSS
  12. CSS3 Fade Effect
  13. Why can’t I animate custom properties (aka CSS variables)?
  14. CSS: Animation vs. Transition
  15. CSS transitions with calc() do not work in IE10+
  16. CSS3 Transition – Fade out effect
  17. Flip a 3D card with CSS
  18. How to make radial gradients work in Safari?
  19. Font weight turns lighter on Mac/Safari
  20. iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue
  21. Less CSS: Mixins with Variable Number of Arguments
  22. WebKit CSS content Unicode bug?
  23. Chrome & Safari Error::Not allowed to load local resource: file:///D:/CSS/Style.css
  24. Image moves on hover when changing filter in chrome
  25. CSS background-position not working in Mobile Safari (iPhone/iPad)
  26. webkit transform blocking link
  27. Drawing border colors during a CSS transition
  28. Why on Safari the transform translate doesn’t work correctly?
  29. Why does enabling hardware-acceleration in CSS3 slow down performance?
  30. Turning off Twitter Bootstrap Navbar Transition animation

Leave a Comment