Safari CSS Breite Übergang funktioniert nicht mit verschiedenen Maßeinheiten

Question

Ich habe ein Problem mit -webkit-transition in Safari. Diese Übergänge funktionieren problemlos in Chrome, FF und IE10 (unter Verwendung der nicht vordefinierten Übergangseigenschaft).

In meiner Website gibt es 3 Panels, die angezeigt werden können. Das Hauptfenster wird standardmäßig geöffnet und die anderen 2 werden auf der rechten Seite des Fensters ausgeblendet, um einen Teil ihres Inhalts anzuzeigen. Wenn auf ein reduziertes Panel geklickt wird, wird ihm über JS eine zusätzliche Klasse hinzugefügt, die auf 100% Breite übergeht.

CSS:

.panel-1{ 
    width: 100%; 
} 

.panel-2{ 
    width: 8rem; 
    position: absolute; 
    top: 0; 
    right: 0; 
    overflow: hidden; 
    z-index: 500; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
} 

.panel-2:hover{ 
    width: 10rem; 
} 

.panel-2.panel-open{ 
    width: 100%; 
} 

.panel-3{ 
    width: 4rem; 
    position: absolute; 
    top: 0; 
    right: 0; 
    overflow: hidden; 
    z-index: 501; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
} 

.panel-3:hover{ 
    width: 6rem; 
} 

.panel-3.panel-open{ 
    width: 100%; 
} 

Das Problem scheint mit dem Unterschied von Maßeinheiten zu sein. Die Hover-Übergänge funktionieren wie vorgesehen (rem bis rem), jedoch überspringt der Breitenübergang (rem zu %) bei "Panel-Open" den Übergang und springt einfach auf. Wenn ich die Standardbreite auf einen Prozentwert anstelle von rem umstelle, funktioniert der Übergang wieder. Ich kann dies jedoch nicht tun, da es sich um einen flüssigen Ort handelt und die Breite der Paneele nicht statisch und nicht relativ sein muss.

Ich habe versucht, eine min-width in % hinzuzufügen, aber das hat nicht geholfen. Jeder diesbezügliche Rat wird sehr geschätzt.

Answer 1

Übergänge auf width sind ein Problem. Versuchen Sie max-width.

Answer 2

Übergang ein width ist in meiner Erfahrung problematisch. Sie können dies in die Werte left und right konvertieren, anstatt die Breite zu verwenden. width: 20%; wäre das gleiche wie left: 80%; right: 0;, und width: 50%; wäre left: 25%; right: 25%;. Hier ist ein codepen https://codepen.io/anon/pen/JWaJzN

document.getElementById("wrapper").addEventListener("click", function(){ 
 
    if (this.classList.contains('center')) { 
 
    this.classList.remove('center'); 
 
    } 
 
    else { 
 
    this.classList.add('center'); 
 
    } 
 
});

.container { 
 
    width: 550px; 
 
    height: 250px; 
 
    position: relative; 
 
    background-color: teal; 
 
} 
 

 
#wrapper { 
 
    height: 20%; 
 
    top: 0; 
 
    right: 0; 
 
    left: 80%; 
 
    position: absolute; 
 
    transform-origin: top left; 
 
    transition: all 1s ease; 
 
} 
 

 
#wrapper.center { 
 
    top: 50%; 
 
    left: 25%; 
 
    right: 25%; 
 
    transform: translateY(-50%); 
 
} 
 

 
#card { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    transition: all 1s ease; 
 
} 
 

 

 
h3 { 
 
    margin: 0; 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: red; 
 
}

<section class="container"> 
 
    
 
    <div id="wrapper"> 
 
    <div id="card"> 
 
     <h3>click here</h3> 
 
    </div> 
 
    </div> 
 
    
 
</section>