Bug en CSS3 rotateY transition sur Safari?

Je suis en train de montrer un modal popup en utilisant CSS3 transitions (en grande partie emprunté à Effeckt.css). Il fonctionne bien dans tous les navigateurs modernes à l'exception de Safari. Dans Safari, le mouvement est OK, mais la couleur d'arrière-plan s'enclenche de façon inégale.

C'est le code, le problème est visible dans Safari sur mac OSX: http://jsfiddle.net/eJsZx/4/

Une capture d'écran du problème avant qu'il ne résout de lui-même. Vous pouvez voir que la moitié de la div est bien de couleur blanche, la moitié est toujours transparente.

Bug en CSS3 rotateY transition sur Safari?

C'est la partie pertinente de la CSS (.effeckt-show et .md-effect-8 sont appliqués lorsque le bouton est cliqué, pour montrer le 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;
}

OriginalL'auteur Richard | 2013-08-09

  1. 20

    Aussi loin que je peux dire que c'est un bug, oui, Safari est rendu intersection où il ne devrait pas.

    Pendant un certain temps Je pensais que Safari est en train de faire par toujours rendu intersection d'éléments, mais comme je le comprends les spécifications, seuls les éléments dans le même Contexte de rendu 3d devrait se croisent, et qui seraient les enfants des éléments avec un transform-style de preserve-3d.

    Jusqu'à présent, la seule solution que j'ai trouvé (testé uniquement sur Windows encore où Safari montre le même comportement) est de traduire les éléments qui sous-tendent l'écart sur l'axe des z. Sans point de vue, il ne fait traduire, mais Safari/Webkit semble penser qu'il fait (ce qui est probablement parce qu'il à tort traite l'élément comme si elle était dans le même contexte de rendu 3d comme le fait transformé boîte de dialogue) et donc les éléments ne plus se croisent.

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

    Pour ma solution jsfiddle.net/ardeezstyle/cdcnyfr6, j'ai du faire une petite modification -webkit-transform: translateZ(1000px); et cela a fonctionné comme un charme. Mon +1. Merci #ndm
    Sauvé mes fesses! Merci 🙂 FWIW, -1000px n'est pas nécessaire si vous n'avez pas fou Z traductions déjà, vous pouvez vous en sortir avec -1px.

    OriginalL'auteur ndm