7

I'm pretty shocked after confirming that font size is affected somehow while using flexbox on Safari iOS

iOS enter image description here

Desktop enter image description here

Code

a {
    font-size: 14px;
}

a + a {
    margin-left: 1em;
}

.flex {
    display: flex;
}

.float > a {
    float: left;
}

.float:after {
    content: "";
    display: block;
    clear: both;
}
<div>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
</div>

<div class="flex">
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
</div>

<div class="float">
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
</div>

What am I missing here?, is this a bug?

coma
  • 16,429
  • 4
  • 51
  • 76
  • I think it's a bug, use [CSS Reset](http://cssreset.com/) or [CSS Normilize](https://necolas.github.io/normalize.css/) to fix this – AleshaOleg Jul 13 '16 at 08:37
  • hey @AleshaOleg! well, I'm actually using the reset from Eric Meyer, but anyway, the issue is so obscure that I can't event see the difference from the inspector. – coma Jul 13 '16 at 08:42
  • Checked on my iPhone 6 (iOS 9.3.3) - everything is fine. [Here](https://www.dropbox.com/s/o0p6ugz5k11rowx/2016-07-13%2011.45.54.png?dl=0) is picture. – AleshaOleg Jul 13 '16 at 08:47
  • Nope @AleshaOleg, compare the font size from the first line with the second one on your own screenshot. – coma Jul 13 '16 at 08:50
  • what browser you using under desktop? By the way `display: flex;` and `float: left` have same effect in my example – AleshaOleg Jul 13 '16 at 09:00

1 Answers1

14

So, the issue with the font-size appears for both, flex and float:

https://stackoverflow.com/a/22417120/94144

Adding this fixed it:

a {
    text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    -moz-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%;
}
Community
  • 1
  • 1
coma
  • 16,429
  • 4
  • 51
  • 76