Post

Replies

Boosts

Views

Activity

CSS3: flex transition doesn't work anymore at least since Safari 13.1 (Mac)
Here is the simplest code that works on every modern browser (and also on very recent safari browsers) but not on the v.13.1 that I just updated on my Mac. Unfortunately I can't tell which version of Safari I had just before but I updated it no more than 4 months ago, max. So it was a pretty recent one.The point is to get a section to expand when hovering it while the other sections remain equally large. Simple enough.Everything works on Safari 13.1 (it expands alright) except the animation of the flex transition.On Safari 13.1 it is abrupt while on any other browser, Chrome/Firefox/older Safari included, the transition is smooth.Any fix or workaround (based on flex) please?Here is the CSS:section{ height: 200px; } .list{ display: flex; } .color{ display: flex; flex: 1 1 10em; overflow: hidden; transition: flex 500ms; } color:hover{ flex: 1 1 40em; }Here is the HTML:<div class="list"> <section class="color" style="background: red"></section> <section class="color" style="background: blue"></section> <section class="color" style="background: green"></section> <section class="color" style="background: yellow"></section> <section class="color" style="background: orange"></section> </div>And here is a jsFiddle in order to see the code working live and edit it at your will:https://jsfiddle.net/64qpvhuo/1/This code will run smoothly anywhere except on the very latest version(s). of Safari.Note: I know that replacing flex transition with (min-)width transitions works but it implies some undesired side effects as it becomes complex very quickly when borders and paddings come into play, especially when the website is responsive, the amount of sections is dynamic and one needs a precision to the pixel. Flex is very straight forward in that regard as everything is taken care of by design. I learned it the hard way by testing every other solution for weeks and ruling them out one by one when blocking issues appeared along the way.That's why I need to stick with the flex transition.With the example here above, width transitions would work seemlessly but this is just the minimal use case to show the flex issue, not my final script that is way more complex and which doesn't comply with width transitions very well (and that's an understatement).Thank you.PS: I'm running MacOS Mojave 10.14.6 on an iMac Pro.
1
0
4.3k
Apr ’20