DrummerHead / safari-flex-basis-animation-bug

Proof of concept for flexbugs

Safari flex-basis animation bug

Safari doesn't like animating flex-basis property. This repo is a test case for this.

Check the files on dist

You can run a localhost server for the dist files with gulp serve:dist

Alternatively, go to the folder and run pythom -m SimpleHTTPServer

Lazily, check http://mcdlr.com/safari-flex-basis-animation-bug/

Safari versions tested

OS X El Capitan 10.11.6
Safari Version 9.1.3 (11601.7.8)

iOS 9.3.5
navigator.appVersion === "5.0 (iPad; CPU OS 9_3_5 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13G36 Safari/601.1"
navigator.userAgent === "Mozilla/5.0 (iPad; CPU OS 9_3_5 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13G36 Safari/601.1"

Workaround

• For flex-direction: row animate width instead of flex-basis
• For flex-direction: column animate height instead of flex-basis

Flexbugs discussion

philipwalton/flexbugs#176