Search code examples
csssafarifont-sizeclamp

Safari 14 - min(), max(), clamp() not working with vw and px values

I have a container where I want to set its font-size so it reflects on its children.

I'm using the following to support font sizes for different screen sizes:

.hero {
    font-size: clamp(4px, 1vw, 10px);
}

The CSS above works fine for Google Chrome, but when I run my page on Safari (Safari 14 to be exact), the font size does not resize as I change the window's size. If I resize the window and then refresh the page, the font does resize, but it stays at that initial font size.

I have also tried running the min() / max() version of clamp() as so ...

.hero {
    font-size: max(4px, min(1vw, 10px));
}

But I still get the exact same issue. The font size is not resizing on Safari. I have tried replacing the px with reasonable pt values, but the issue still remains. I'm not sure if this issue was on Safari 13, but I recently updated to Safari 14.

Is this a known issue? Am I missing something? How can I solve this problem without having to use any JavaScript?

Solution

  • Apparently, Safari calculates clamp() incorrectly... Setting the min-height property does the job. I have changed the values of the original example, because it was so small that you could not see any effect:

    .hero {
  min-height: 0vw;
  font-size: clamp(16px, 10vw, 32px);
}

    and then:

    <h1 class="hero">Hero Text</h1>

    Here is a JSFiddle