An interesting CSS flexbox issue with Apple’s iOS

I ran into an interesting issue recently with CSS Flexible Box Layout and Apple’s iOS Safari (latest version) – and the issue only occurs on iOSĀ  Safari.

Let’s say you have a parent element with a display: flex;. And let’s say some children elements of this parent element also use display: flex;. These children elements also use vw/vh measurements for min/max width.

And iOS Safari seems to have issues with this – the layout, for some child elements, went bizarre and iOS Safari seemed to add extra margin to the right pushing the main content in.

So far the only workaround I got is to detect (via Modernizr) if it’s an iOS device and change my css from display: flex; to display: inline-block;. It’s not perfect, there’s some things I’d love to figure out better. But for now it does the job.

Addendum: Apparently this is a known (and as yet) unfixed bug:

Updated theme

Now that WordPress 4.4 is out, I’ve decided to refresh my theme. I played around with twentysixteen and I am quite impressed. By itself it’s a very understated “blog” theme – but this makes it perfect for customization and extension. You can do this through either the built in WordPress tools or through a custom child theme. An evening of design and development later, I have a nice child theme which captures the look and feel I want.

While in its default appearance twentysixteen doesn’t look like much, a little bit of customizations can get you a very flexible and functional theme with just the right personality.