Bug 212522

Summary: CSS Clamp implementation incomplete
Product: WebKit Reporter: Wes Bos <wesbos>
Component: CSSAssignee: 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   

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)