Bug 284955 – piccalil.li: Font size doesn't scale with Command-+ because of use of clamp()

• Component: Layout and Rendering
• Status: RESOLVED DUPLICATE

[Simon Fraser (smfr)]

Load piccalil.li and try to increase or decrease the zoom level with Command-+. The font size doesn't scale. It does in other browsers.

[Radar WebKit Bug Importer]

<rdar://problem/141761671>

[Karl Dubost]

```
.card__summary {
    font-size: var(--card-summary-font-size , var(--text-size-base));
}
```

`font-size: var(--card-summary-font-size , var(--text-size-base));`
➜  `--card-summary-font-size: var(--text-size-base);`
➜  `--text-size-base: var(--size-step-0);`
➜  `--size-step-0: clamp(1.0625rem, 0.9954rem + 0.3356vi, 1.3125rem);`


Computed Zoom Level 0
```
font-size: 18.785711px;
var(--card-summary-font-size,var(--text-size-base)) .card__summary	
var(--text-size-base) body	
```

Computed Zoom Level +1
```
font-size: 16.335402px;
var(--card-summary-font-size,var(--text-size-base)).card__summary	
var(--text-size-base)body
```

Computed Zoom Level +2 (no changes)
```
font-size: 16.335402px;
var(--card-summary-font-size,var(--text-size-base)).card__summary	
var(--text-size-base)body
```

Computed Zoom Level +3
```
font-size: 12.523808px;
var(--card-summary-font-size,var(--text-size-base)).card__summary	
var(--text-size-base)body
```

With Firefox the computed font-size also reduces, but the visual font size is increasing.

At each zoom level the width of the body in both Firefox and Safari is getting smaller.

The code is using vi and rem for the font-size
https://drafts.csswg.org/css-values/#vi

It might be a duplicate of Bug 212522

*** This bug has been marked as a duplicate of bug 212522 ***