[Webkit-unassigned] [Bug 265882] New: Visual artifacts due to sub-pixel CSS transform value

[bugzilla-daemon at webkit.org]

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

            Bug ID: 265882
           Summary: Visual artifacts due to sub-pixel CSS transform value
           Product: WebKit
           Version: Safari 16
          Hardware: Mac (Intel)
                OS: macOS 13
            Status: NEW
          Severity: Minor
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: octrace at gmail.com

Created attachment 468898

  --> https://bugs.webkit.org/attachment.cgi?id=468898&action=review

Visual artifact

Overview: When I use sub-pixel values for transformations, the browser partially miscalculates the position of elements.

Steps to Reproduce: https://codesandbox.io/p/sandbox/sub-pixel-transform-hftvt5?file=%2Findex.html

Actual Results: There is three vertical lines 1px wide (1 device pixel) with #C2C2C2 color in the place where edges of the boxes are.

Expected Results: Two boxes of size 50x50, which are children of the container 100x50 should fully cover their parent, no matter which translate transformation it has.

Visual artifacts do not appear if translate value is integer or has a fractional part equal to 0.5. As I understand it, this is all due to the fact that my display has a Device Pixel Ratio of 2.

A similar problem occurs in other browsers as well.

I also noticed that this can be fixed by adding "will-change: transform". But the fix only works if we add this property to the container only, if we add it to the children as well, the artifact reappears (it looks a bit different though). Demo: https://codesandbox.io/p/sandbox/cool-cloud?file=%2Findex.html%3A9%2C23

-- 
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/20231205/c10ecbf3/attachment.htm>