14

CSS3 トランジション (主にEffeckt.cssから借用) を使用してモーダル ポップアップを表示しています。Safari を除くすべての最新のブラウザーで問題なく動作します。Safariでは動きはOKなのですが、背景色がバラバラにはまってしまいます。

これはコードです。問題は OSX の Safari で確認できます: http://jsfiddle.net/eJsZx/4/

問題が解決する前のスクリーンショット。div の半分が正しく白く着色され、半分がまだ透明であることがわかります。

ここに画像の説明を入力

これは CSS の関連部分です (ボタンがクリックされたときにモーダルを表示するために適用されます) .effeckt-show。.md-effect-8

.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;
}
4

5 に答える 5

34

私が知る限り、それはバグです。そうです、Safari は本来あるべきではない交差点をレンダリングしています。

しばらくの間、Safari は常に要素の交差をレンダリングすることで正しく処理していると考えていましたが、specを理解している限り、同じ3D レンダリング コンテキストtransform-style内の要素のみが交差する必要があり、それはofを持つ要素の子になりますpreserve-3d。

これまでのところ、私が見つけた唯一の回避策 (Safari が同じ動作を示す Windows でのみテスト済み) は、基になる要素を 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/

于 2013-08-11T00:19:20.970 に答える
2

Safari (Mac および iOS) で発生していた問題の解決策を見つけようとしているときに、この問題を見つけました。y 回転した svg が明確な理由もなく右半分しか表示されませんでした。

position: fixed私の場合、svg は固定位置の div の子でありposition: absolute、親の両方で svg の半分が消えることがわかりました。

z インデックス、パースペクティブ、translate-z を変更しても問題は解決しないようです。しかし、ランダムに、私の svg の周りに新しい div を追加し、その背景色を設定すると問題が解決しました。これが次の人に役立つことを願っています:)

于 2020-01-05T06:05:49.570 に答える