Search code examples
cssfontssafarifluid-layoutviewport-units

Div and text in vw units dont resize together in Safari

I have a Div with 50vw, and a text paragraph inside with font 2vw. Depending on the window size, the position of words are very different. In Chrome they both keep the same ratio, but in Safari the layout gets broken. I cannot control the browser of each user, but I need to preserve the layout.

I get different growth rates for different fonts. Some like Arial will almost stay in place, but custom ones (From google-fonts) suffer steps in growth (width or height jumps, but not both together) while resizing. I suppose the problem is within font properties.

Also, I have inspected the font to see the calculated pixels and identified that the font jumps when passing over any .5 px unit (as in, 15.5px, or 17.5px). I suspect of the Safari pixel rendering. Can this be overriden/controled?

I have tried subpixel-antialiased, font-smoothing, and also played some time with font-feature-setting, but this last one I don't really understand how it works.

<html>
<head>

<style>
    @import url('https://fonts.googleapis.com/css?family=Mansalva&display=swap');
</style>
</head>

<body>
<div class="container">
    <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat voluptates aperiam quae saepe veniam cum soluta impedit repellendus repudiandae sed necessitatibus nostrum placeat porro, magnam minus sequi eum dolores delectus!</p>
</div>
</body>
</html>

and CSS - I have used one random font, mansalva

.container {
position: relative;
background: red;
display: flex;
align-items: center;
width: 50vw;
height: 50vw;
}

.text {
font-family: mansalva;
font-size: 2vw;
}

If you play with the browser width IN SAFARI, you will see that words jump between lines, i.e. not maintaining the ratio

Solution

  • after a week looking for solutions, the most simple thing came across. Its not a very good solution, but is a solution. If I set the paragraph width to a limited number of characters:

    .container {
position: relative;
background: red;
display: flex;
align-items: center;
width: 50vw;
height: 50vw;
}

.text {
font-family: mansalva;
font-size: 2vw;
Width: 25ch;
}

    It works, but always if the width of the lines are smaller than .container's width. Otherwise, the text overflows or wraps as before.

    Its a bad solution because you need to test manually for each paragraph and div and font, and maybe for different phrases, as black spaces are not counted as ch units.

    I will hold to select the answer as I hope someone can think of a better solution.