Bug 265882 – Visual artifacts due to sub-pixel CSS transform value

• Component: Layout and Rendering
• Status: NEW

[Andrew Shcherbyna]

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

[Radar WebKit Bug Importer]

<rdar://problem/119559655>