NEW 265882
Visual artifacts due to sub-pixel CSS transform value 
https://bugs.webkit.org/show_bug.cgi?id=265882
Summary Visual artifacts due to sub-pixel CSS transform value
Andrew Shcherbyna
Reported 2023-12-05 09:41:41 PST
Created attachment 468898 [details] 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
Attachments
Visual artifact (2.74 KB, image/png)
2023-12-05 09:41 PST, Andrew Shcherbyna 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2023-12-12 09:42:15 PST
<rdar://problem/119559655>
Note You need to log in before you can comment on or make changes to this bug.