235900 2022-01-31 10:48:55 -0800 REGRESSION(r166784): Accumulated pixel rounding errors cause gradient color stops to be misaligned 2024-05-30 18:18:00 -0700 1 1 1 Unclassified WebKit Layout and Rendering Safari Technology Preview Unspecified Unspecified NEW https://bugs.webkit.org/show_bug.cgi?id=241800 https://codepen.io/thebabydino/pen/KKydBxw InRadar P2 Normal --- 131144 1 simon.fraser zalan ahmad.saleem792 bfulgham mmaxfield simon.fraser webkit-bug-importer zalan oldest_to_newest 1835588 0 simon.fraser 2022-01-31 10:48:55 -0800 WebKit has misaligned gradient color stops in this test: https://codepen.io/thebabydino/pen/KKydBxw Reported by Ana Tudor: https://twitter.com/anatudor/status/1487853791147868162 1835609 1 mmaxfield 2022-01-31 11:27:06 -0800 div { min-height: 8em; background: linear-gradient(90deg, #f00 1px, #0000 0) 0/8em, linear-gradient(90deg, #00f 1px, #0000 0) 0/1.6em 50% repeat-x; } div + div { --w: min(40em, 100vw - 2em); background-size: calc(var(--w)/5), calc(var(--w)/25) 50%; } 1835805 2 mmaxfield 2022-01-31 18:41:10 -0800 RenderBoxModelObject::calculateBackgroundImageGeometry() calls pixelSnapBackgroundImageGeometryForPainting(). 1835808 3 mmaxfield 2022-01-31 19:08:51 -0800 Commenting out these two lines in pixelSnapBackgroundImageGeometryForPainting() makes the bug go away: tileSize = LayoutSize(snapRectToDevicePixels(LayoutRect(destinationRect.location(), tileSize), scaleFactor).size()); phase = LayoutSize(snapRectToDevicePixels(LayoutRect(destinationRect.location(), phase), scaleFactor).size()); but I don't know if that's a safe change. Assigning to Alan. 1835809 4 mmaxfield 2022-01-31 19:35:32 -0800 Thinking more about this, the correct answer probably isn't to not pixel snap, but instead would probably be to repeatedly place the images, and then pixel snap their left and right edges (as opposed to their widths). 1835811 5 mmaxfield 2022-01-31 19:39:49 -0800 Also, if this is a paint-time operation, it probably shouldn't be using LayoutUnits... Maybe? 1835818 6 webkit-bug-importer 2022-01-31 20:15:51 -0800 <rdar://problem/88309058> 1846428 7 453341 zalan 2022-02-27 07:01:15 -0800 Created attachment 453341 Test reduction 1846539 8 zalan 2022-02-27 21:45:35 -0800 >background: linear-gradient(90deg, black 1px, transparent 0) 0px/ 128px, linear-gradient(90deg, red 1px, transparent 0) 0px/ 25.6px 50px repeat-x; I think this example should make every black line overlap a red line (1st, 6th, 11th...). However pixel-snapping translates the 25.6px value to 25.5px and while the second black line only misses the 6th red line by 0.5px (1 devices pixel on retina displays) these 0.1px pixel diffs add up on repeating backgrounds producing larger gaps over time. I believe the solution is what Myles suggested above; not pixel-snap the tileSize, phase and space but only the destination rect. Something like this: -static void pixelSnapBackgroundImageGeometryForPainting(LayoutRect& destinationRect, LayoutSize& tileSize, LayoutSize& phase, LayoutSize& space, float scaleFactor) -{ - tileSize = LayoutSize(snapRectToDevicePixels(LayoutRect(destinationRect.location(), tileSize), scaleFactor).size()); - phase = LayoutSize(snapRectToDevicePixels(LayoutRect(destinationRect.location(), phase), scaleFactor).size()); - space = LayoutSize(snapRectToDevicePixels(LayoutRect(LayoutPoint(), space), scaleFactor).size()); - destinationRect = LayoutRect(snapRectToDevicePixels(destinationRect, scaleFactor)); -} - bool RenderBoxModelObject::fixedBackgroundPaintsInLocalCoordinates() const { if (!isDocumentElementRenderer()) @@ -1387,7 +1379,7 @@ BackgroundImageGeometry RenderBoxModelObject::calculateBackgroundImageGeometry(c } destinationRect.intersect(borderBoxRect); - pixelSnapBackgroundImageGeometryForPainting(destinationRect, tileSize, phase, spaceSize, deviceScaleFactor); + destinationRect = LayoutRect { snapRectToDevicePixels(destinationRect, deviceScaleFactor) }; <- Ignore that we still use LayoutRect type here instead of FloatRect. return BackgroundImageGeometry(destinationRect, tileSize, phase, spaceSize, fixedAttachment); } I'd be more confident if someone with better understanding on background images could chime in though. 1963442 9 ahmad.saleem792 2023-06-23 16:35:30 -0700 I am still able to reproduce this bug on WebKit ToT (265489@main) using attached test case from Alan where the 'red' does not cover 'blue' lines and have gaps while Chrome Canary 116 and Firefox Nightly 116 works properly and have no gaps. 453341 2022-02-27 07:01:15 -0800 2022-02-27 07:01:15 -0800 Test reduction 235900.html text/html 253 zalan PHN0eWxlPgpkaXYgewogIGhlaWdodDogNTBweDsKICB3aWR0aDogODAwcHg7CiAgYmFja2dyb3Vu ZDogbGluZWFyLWdyYWRpZW50KDkwZGVnLCAjZjAwIDVweCwgIzAwMDAgMCkgMC8gMTI4cHgsIGxp bmVhci1ncmFkaWVudCg5MGRlZywgIzAwZiAxcHgsICMwMDAwIDApIDAvIDI1LjYycHggMzBweCBy ZXBlYXQteDsKfQo8L3N0eWxlPgo8ZGl2PjwvZGl2PgpQQVNTIGlmIG5vIGdhcCBiZXR3ZWVuIHRo ZSByZWQgYW5kIHRoZSBibHVlIGxpbmVzLg==