在Safari中的CSS3 rotateY转换错误？ [英] Bug in CSS3 rotateY transition on Safari?

问题描述

我使用CSS3转换显示模式弹出式窗口（主要借用，总是渲染元素的交集， 规范，只有元素在同一< a href =http://www.w3.org/TR/2013/WD-css-transforms-1-20131126/#3d-rendering-context> 3d渲染上下文应该相交，这将是变换式> 保存-3d 元素的子元素。



到目前为止，我发现的唯一解决方法是（仅在Windows上测试，但Safari显示相同的行为）是在z轴上翻译底层元素。没有透视应用它不会实际翻译，但Safari / Webkit似乎认为它的（这可能是因为它错误地把元素看作是在同一个3d渲染上下文中，因为实际转换的对话框），所以元素不再交叉。

  .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/

I am showing a modal popup using CSS3 transitions (largely borrowed from Effeckt.css). It works well in all modern browsers except Safari. In Safari, the movement is OK, but the background-color snaps in unevenly.

This is the code, the problem is visible in Safari on OSX: http://jsfiddle.net/eJsZx/4/

A screenshot of the problem before it resolves itself. You can see that half the div is correctly colored white, half is still transparent.

This is the relevant part of the CSS (.effeckt-show and .md-effect-8 are applied when the button is clicked, to show the modal):

.effeckt-modal {
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  background: white;
}
.md-effect-8 {
  -webkit-perspective: 1300px;
  -ms-perspective: 1300px;
  -o-perspective: 1300px;
  perspective: 1300px;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.md-effect-8 .effeckt-modal {
  -webkit-transform: rotateY(-70deg);
  -ms-transform: rotateY(-70deg);
  -o-transform: rotateY(-70deg);
  transform: rotateY(-70deg);
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
  opacity: 0;
}
.effeckt-show.md-effect-8 .effeckt-modal {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 1;
}

解决方案

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/

这篇关于在Safari中的CSS3 rotateY转换错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！