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%));
}
```