Two CSS bugs in mobile Safari

By Oleksii Rudenko November 20, 2015 7:58 PM

I don’t often mess with pure CSS but when I do I encounter various browser issues. This time I had two CSS problems in the latest iPhone’s Safari.

Font-size of some elements is larger than defined by CSS

It turns out that this behavior is a hidden feature of Safari: the browser can change the font size of elements if it decides that the font size is too small. But that’s not always what you want.

Luckily, there is a way to disable the feature:

@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: none;
  }
}

This feature is supported not only by Safari but also by Firefox and mobile IE. I have not tested this case with Firefox and IE but I guess to disable it everywhere one should use the following:

@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
  }
}

The feature was originally developed to cope with websites that are not designed to work on small screens. I doubt that there is other use case for text-size-adjust. So if your website is adaptive, you can disable it to avoid any problems with automatic text size adjustments.

Flex box layouts don’t wrap

See this pen: http://codepen.io/OrKoN/full/ojOBzN/

The layout is very simple: there is a container for flexible divs (display: flex;, flex-direction: row;,flex-wrap: wrap;). There are 3 divs inside and each hasflex: 1andmin-width` set. The expected behavior is that once the divs don’t fit the screen they are placed below. This works fine in Chrome and FF but not in mobile Safari. In mobile Safari, the divs are placed in the same row and do not fit the screen.

There is a bug filed for this: https://bugs.webkit.org/show_bug.cgi?id=136041 The comments also contain a solution which is to define flex like this flex(1 1 $min-width).

Here is the working pen: http://codepen.io/OrKoN/full/YyMNxq/ The drawback of this solution is that the width will always equal $min-width so this fix should be applied on narrow viewports only.

Thanks for reading.