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

Solution 1:

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

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

Solution 1:

Related

Recent Posts