[Webkit-unassigned] [Bug 254990] New: transform loses accuracy on page zoom

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=254990

            Bug ID: 254990
           Summary: transform loses accuracy on page zoom
           Product: WebKit
           Version: Safari 16
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: clshortfuse at gmail.com

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230404/0d55aca9/attachment-0001.htm>