Przekrycie szerokości pliku css Safari nie działa z różnymi jednostkowymi pomiarami

Question

Mam problem z -webkit-transition w przeglądarce Safari. Te przejścia działają dobrze w Chrome, FF i IE10 (przy użyciu nieprzepisanej właściwości przejścia).

Na mojej stronie znajdują się 3 panele, które można wyświetlić. Główny otwiera się domyślnie, a pozostałe 2 są zwinięte po prawej stronie okna, pokazując kawałek ich zawartości. Po kliknięciu zwiniętego panelu dodatkowa klasa jest dodawana do niego przez JS i przechodzi do szerokości 100%.

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

Problem wydaje się być z tą różnicą, jednostek pomiarowych. Przejścia na hover działają zgodnie z zamierzeniami (rem do rem), jednak przejście szerokości (rem do %) w "otwartym panelu" pomija przejście i po prostu otwiera się. Jeśli zmienię domyślną szerokość na wartość procentową zamiast na rem, przejście będzie znów działać. Nie mogę tego zrobić, ponieważ jest to płynne miejsce, a zwinięte panele muszą być statyczne, a nie względne.

Podjęto próbę dodania min-width w %, ale to nie pomogło. Wszelkie rady na ten temat byłyby bardzo mile widziane.

Answer 1

Przejścia na width są problemem. Wypróbuj max-width.

Answer 2

Przejście na width jest problematyczne z mojego doświadczenia. Można to przekonwertować na wartości left i right zamiast na szerokość. width: 20%; byłby taki sam jak left: 80%; right: 0;, a width: 50%; byłby left: 25%; right: 25%;. Oto 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>