Bug 212522 - CSS Clamp implementation incomplete
Summary: CSS Clamp implementation incomplete
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Mac Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-05-29 07:28 PDT by Wes Bos
Modified: 2021-05-02 19:13 PDT (History)
6 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Wes Bos 2020-05-29 07:28:22 PDT
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)
Comment 1 Radar WebKit Bug Importer 2020-06-01 17:43:29 PDT
<rdar://problem/63851634>
Comment 2 Peter 2021-05-02 16:34:01 PDT
Any updates? Still an issue in Version 14.1 (16611.1.21.161.3)