La transizione della larghezza css Safari non funziona con diverse misure dell'unità

Question

Ho riscontrato un problema con -webkit-transition in Safari. Queste transizioni funzionano bene in Chrome, FF e IE10 (utilizzando la proprietà di transizione non prefissata).

Nel mio sito, ci sono 3 pannelli che possono essere visualizzati. Il principale si apre per impostazione predefinita e gli altri 2 sono compressi a destra della finestra mostrando una scheggia del loro contenuto. Quando si fa clic su un pannello compresso, viene aggiunta una classe addizionale tramite JS e la sua transizione al 100% della larghezza.

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%; 
} 

Il problema sembra essere con la differenza di unità di misura. Le transizioni al passaggio del mouse funzionano come previsto (rem a rem), tuttavia la transizione della larghezza (rem a %) su "pannello-aperto" salta la transizione e apre semplicemente gli snap. Se cambio la larghezza predefinita in percentuale invece di rem, la transizione funziona di nuovo. Non posso farlo tuttavia poiché si tratta di un sito fluido e le larghezze collassate del pannello devono essere statiche e non relative.

Ho tentato di aggiungere uno min-width in %, ma questo non ha aiutato. Qualunque consiglio su questo sarebbe molto apprezzato.

Answer 1

Le transizioni su width sono un problema. Prova max-width.

Answer 2

La transizione a width è problematica nella mia esperienza. È possibile convertire questo valore utilizzando i valori left e right invece di utilizzare la larghezza. width: 20%; sarebbe lo stesso di left: 80%; right: 0; e width: 50%; sarebbe left: 25%; right: 25%;. Ecco un 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>