| Summary: | CSS Clamp implementation incomplete | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Wes Bos <wesbos> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | koivisto, ntim, pmcorrea, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari Technology Preview | ||
| Hardware: | Mac | ||
| OS: | Unspecified | ||
Any updates? Still an issue in Version 14.1 (16611.1.21.161.3) |
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)