Safari is the new IE

Working with CSS these days is way better than few years ago thanks to the new specs as well as the commitment towards W3C standards from browser vendors.

Unfortunately, it's not perfect. Indeed, we're far from living in a perfect world.

I can feel a pattern everytime I work with CSS and layout: Safari is the last step, the "give me a break, eventually, I'll fix Safari issues".

Here an example of what I'm talking about. A simple layout with a scrollable container and a bunch of children that expand their height 100% the container size.

On Chrome and Firefox this works like a charm, but not on Safari (because it fails to calculate the height of the children elements according to the container size):

See the Pen Child height in flex parent by Fabio Franchino (@abusedmedia) on CodePen.

Since it will be fixed at some point, here a screenshot taken with Safari 10.1.2 desktop version:

And here a modified version to make it Safari compatible. You can see I had to add an additional wrapper and change the CSS making it less maintainable:

See the Pen Child height in flex parent Safari compatible by Fabio Franchino (@abusedmedia) on CodePen.

As it happened in the old days, testing against the less compliant browser is key to avoid big headaches during CSS development. You've been warned.

Update: actually, using 100vh instead 100% as height value makes it to work as expected. Good to know, however, this doesn't change my feeling on Safari. Actually, 100vh is not a solution since Safari on iOS ignores its bottom-bar to calculate the height resulting in a wrong value.

Update 2: apparently, the upcoming Safari 11 fixed the mentioned issue.