Safari css width transition does not work with various device dimensions

Question

I have a problem with -webkit-transition in Safari. These transitions work fine in Chrome, FF, and IE10 (using a property with a transition prefix).

There are 3 panels on my website that can be viewed. The main one opens by default, and the remaining 2 are minimized to the right of the window, showing a ribbon of their contents. When the clicked panel is pressed, an additional class is added to it via JS, and it switches to 100% width.

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

The problem is the difference in units. Guidance transitions work as intended (from rem to rem ), however the width transition ( rem to % ) in the "open-open" panel skips the transition and simply opens. If I switch the default width to percent instead of rem , the transition works again. I can’t do this, as this is a liquid site, and the width of the panel caving should be static, not relative.

I tried adding min-width to % , but that didn't help. Any advice on this would be greatly appreciated.

Answer 1

Transitions to width are a problem. Try max-width .

Answer 2

Switching to width problematic in my experience. You can convert this value using the left and right values ​​instead of the width. width: 20%; will be the same as left: 80%; right: 0; left: 80%; right: 0; , and width: 50%; will be left: 25%; right: 25%; left: 25%; right: 25%; . Here's 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>