Seams between adjacent transformed layers

#401515597 Filed 2025-03-04 New

Reproducer

Two independently composited 100 x 100 images share an edge over a yellow backdrop. At non-integral browser zoom, the shared anti-aliased edge can expose a yellow seam.

Set browser zoom to 80%, 90%, 110%, or 125%, then move the phase control. The expected result is one continuous blue rectangle.

phase 0.60px

live browser rendering; yellow at the image boundary is the failure

Expected continuous blue rectangle over yellow

Affected shared edge highlighted in magenta

Open standalone sampler

Cause

Each image edge is blended separately with SrcOver. Complementary edge coverages therefore apply the backdrop twice at any shared edge that lands on a fractional device coordinate.

The fix removes the fractional edge at the source: layers composited solely for a 3d-transform reason (the translate3d map tile pattern) are snapped to the pixel grid in cc, reusing the same TransformTree snapping that scroll translations already get. With edges on integer device coordinates there is no partial coverage to mis-blend, no renderer changes are needed, and outer edges become crisp instead of anti-aliased. will-change: transform, animated, and view transition layers are deliberately not snapped: they either animate soon (a snap would jump at animation start) or must preserve captured fractional geometry. Behind the SnapComposited2dTranslations blink runtime feature (enabled by default, kill switch). An earlier attempt fixed this at composite time in Viz (AccumulateAdjacentAAQuadCoverage) but was rejected for its O(n^2) quad analysis and forced shader blending.

Before / after

Captures from the same patched build at device scale factor 1.25 (headless, software compositing). "Before" runs with --disable-blink-features=SnapComposited2dTranslations, which is equivalent to an unpatched build; "after" is the default. Crops are 4x nearest-neighbor around the shared edge.

Case 1: adjacent composited image layers (this issue's repro)

Before: vertical yellow-tinted seam between two blue image layers — before backdrop shows through the shared edge: rgb(46,46,207)

After: continuous blue, no seam — after continuous rgb(0,0,255)

Two independently composited 100x100 images over yellow, translated to a fractional device position.

Case 2: adjacent solid color layers

Before: seam between two solid color layers — before seam at the shared edge

After: continuous color, no seam — after continuous color

Solid color layers skip rasterization and become SolidColorDrawQuads, so the raster-time seam mitigation never applied to them. Matches the open "adjacent solid color layers" rows in the issue 40084005 case sheet.

Case 3: map tiles (leaflet), fractional translation

Before: light seam line between dark map tiles — before light seam line across dark tiles

After: map tiles meet without a seam — after tiles meet without a seam

Leaflet-style pane: absolutely positioned tiles moved by translate3d, with the pane panned to a fractional offset; the same pattern as the leaflet tile case from the issue 40084005 case sheet, freemap.sk, and Google Maps tile seams. Both the vertical and the horizontal seam lines at the tile junction disappear.