Bug 254990 – transform loses accuracy on page zoom

• Status: NEW
• Component: CSS

[Carlos Lopez]

When using page zoom, a transform will lose accuracy at times. Note the following codepen:

https://codepen.io/shortfuse/pen/qBJWbbd

When zooming in and out on the page, the black dot will move around, not staying in sync with the red circle.

The lines causing the problem are (with --value fixed as 1):

```css
#thumb-anchor {
  inline-size: 1%;
  transform: translateX(calc(var(--value) * 100 * 100%));
}
```

Removing CSS Variables shows the issue is not related to CSS Vars:


```css
#thumb-anchor {
  inline-size: 1%;
  transform: translateX(10000%);
}
```

It's personally low priority for me since I found a fix, but it's still a strange bug:

```css
#thumb-anchor {
  inline-size: 100%;
  transform: translateX(calc(var(--value) * 100%));
}
```

[Ahmad Saleem]

I am able to reproduce this on WebKit ToT (262590@main) as well, I zoomed out and 'black' dot moved while it didn't in Chrome Canary 114.

[Simon Fraser (smfr)]

Created attachment 465786 [details]
Screenshot

[Radar WebKit Bug Importer]

<rdar://problem/107682651>