Why is "font-size: calc(1em + 1vw)" not working on Safari? (but my workaround does)

user_13738687 0
Viewed 1262

It took me the whole day to find a workaround for a problem I just wonder why it is not more commonly discussed here. I am facing a problem with Safari 13.1.1. when try to resize the browser window. It just does not dynamically resize (based on calculated viewpoint width) the font-size as it should:

html {
font-size: calc(1em + 1vw);  /* not working when resizing */
}

My workaround works fine:

html {
font-size: 1vw;  /* initialise first without calc() */
}

body {
font-size: calc(1em + 16px);  /* now working fine when resizing */
}

As you can see you need to first initialise viewpoint width without calc(). The default font-size needs to be added in px. Now it works fine and the text resizes as it should when the window is resized.

My question: Why this strange behaviour? Any explanation? Or just a bug?

responsive-design font-size safari resize css
3 Answers

It looks like an old bug that was not solved. I'm currently having this bug in only some calc()'s in the page, not idea why. I'm using older macOS 10.11 and Safari 11.2, but since you're using version 13, if that's indeed the same bug, then it's not completely fixed. The workaround I've used was to set min-height:

#site-title {
    font-size: calc(1rem + 4.5vw);
    min-height: 0vw;
    (...)
}

References to similar bugs:

user_17970000
user_6734570
user_58071410
Related