Menu
I'm pretty shocked after confirming that font size is affected somehow while using flexbox on Safari iOS
iOS
Desktop
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?
854
If you want to delete flex-basis , you can use width or height instead. When specified on a flex item, the auto keyword retrieves the value of the main size property as the used flex-basis .
flex-basis: auto looks up the main size of the element and defines the size. For example, on a horizontal flex container, auto will look for width and height if the container axis is vertical. If no size is specified, auto will fall back to content .
The flex-shrink property. The flex-shrink property specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.
A flexbox item can be set to a fixed width by setting 3 CSS properties — flex-basis, flex-grow & flex-shrink. flex-basis : This property specifies the initial length of the flex item. flex-grow : This property specifies how much the flex item will grow relative to the rest of the flex items.
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%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With