Bug 212522
Summary: | font-size is not computed correctly when specified by CSS clamp(). implementation incomplete | ||
---|---|---|---|
Product: | WebKit | Reporter: | Wes Bos <wesbos> |
Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
Status: | NEW | ||
Severity: | Normal | CC: | karlcow, koivisto, ntim, pmcorrea, simon.fraser, webkit-bug-importer, zalan |
Priority: | P2 | Keywords: | BrowserCompat, InRadar |
Version: | Safari Technology Preview | ||
Hardware: | Mac | ||
OS: | Unspecified |
Wes Bos
CSS clamp() function is missing two features that the rest of the browsers have implemented:
First, it does not allow for calculating the font size:
```html
<h2>Clamp Me</h2>
<style>
h2 {
font-size: clamp(30px, 20vw + 5rem, 300px);
/* Or with calc(), which isn't needed: */
font-size: clamp(30px, calc(20vw + 5rem), 300px);
}
</style>
```
This feature is needed because viewport units as font sizes are inaccessible as they do not get bigger/smaller when the user zooms in or out.
Second, the browser doesn't repaint the size of the font when the browser is resized:
```html
<h2>Clamp Me</h2>
<style>
h2 {
font-size: clamp(30px, 20vw, 300px);
}
</style>
```
Resize the browser, and you'll see the font size doesn't change. Reload the page at a smaller browser width and it does resize.
Confirmed in Release 107 (Safari 13.2, WebKit 15610.1.14.1)
Attachments | ||
---|---|---|
Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/63851634>
Peter
Any updates? Still an issue in Version 14.1 (16611.1.21.161.3)
Karl Dubost
*** Bug 284955 has been marked as a duplicate of this bug. ***
Karl Dubost
Probably there is a WPT missing for this. Maybe it will be hard to create because of its dependency on zooming
https://wpt.fyi/results/css?label=master&label=experimental&aligned&q=clamp