Bug 230814 – Thin hairline gap displayed for subpixel sized inset box-shadows

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

Created attachment 439308 [details]
Example minimal reproduction of problem

When two elements with box shadows are placed next to each other with no gap, 
and an inset box shadow is applied to each with a subpixel size, there is a thin 
hairline displayed between the box shadows in which the backgrounds of each element 
can be slightly seen.

I've attached a minimal reproduction of the problem. There are two divs, one red and 
one blue, each with an inset box shadow. Both box shadows are sized at subpixel values.
You will notice that there is a small hairline gap between the two box shadows. If you 
then zoom in with a trackpad, this gap becomes much clearer and easier to see.

This behaviour is not reproducible on Chrome/Firefox, both render these inset box 
shadows without a hairline gap.

Created attachment 439309 [details]
New minimal reproduction of problem

I've added a new/updated minimal reproduction. The box shadows don't need to be adjacent, they just have to be inset. In the new reproduction example, there is a green subpixel inset box shadow. You can see that the red background of the element can be seen to the left of the box shadow.

[zalan]

We probably miss a pixel snapping somewhere in RenderBoxModelObject::paintBoxShadow.

[zalan]

right, 
the ShadowStyle::Normal branch has
context.setShadow(snappedShadowOffset
while ShadowStyle::Inset
context.setShadow(shadowOffset,

[zalan]

will upload a patch soon

[zalan]

Created attachment 439629 [details]
Patch

[Simon Fraser (smfr)]

Comment on attachment 439629 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=439629&action=review

> Source/WebCore/rendering/RenderBoxModelObject.cpp:2547
> +            auto snappedShadowOffset = FloatSize { roundToDevicePixel(shadowOffset.width(), deviceScaleFactor), roundToDevicePixel(shadowOffset.height(), deviceScaleFactor) };

Use `roundSizeToDevicePixels(const LayoutSize...)`

[zalan]

Created attachment 439633 [details]
Patch

[zalan]

Created attachment 439647 [details]
Patch

[EWS]

Committed r283258 (242287@main): <https://commits.webkit.org/242287@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 439647 [details].

[Radar WebKit Bug Importer]

<rdar://problem/83686181>

[Arcady Goldmints-Orlov]

Unfortunately, the test added by this change doesn't seem to pass on GTK/WPE or Win10, I guess because of the differences in rounding between the platforms. For an example: https://build.webkit.org/results/GTK-Linux-64-bit-Release-Skip-Failing-Tests/r284281%20(2055)/fast/box-shadow/hidpi-box-shadow-inset-on-subpixel-position-diffs.html