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):
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:
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.
Don't be shy!
Want to ask something? I'd love to help you. Drop me a line!
Not ready to talk? Follow me on Twitter or subscribe to my monthly recap.
Spotted a typo or (likely) a grammar error? Send a pull request.