2068303 - WebGL canvas with continuous rAF rendering ignores ancestor border-radius + overflow:hidden clip on macOS (compositor surface promotion drops rounded clip)

Status: UNCONFIRMED

(Core :: Graphics: WebRender, defect)

Description

[max]

Attachment: ff_corner_repro.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:154.0) Gecko/20100101 Firefox/154.0

Steps to reproduce:

1. On macOS (Apple Silicon, HiDPI display), open the attached single-file repro (no libraries).
2. It shows two divs with border-radius: 24px; overflow: hidden, each containing an absolutely-positioned WebGL2 canvas (backing store sized to CSS × devicePixelRatio) running a continuous requestAnimationFrame clear loop.
3. Observe the corners of both boxes.
4. Press the repro's "stop the render loops" button and observe the large box again.

Also reproducible with border-radius: inherit, clip-path: inset(0 round 24px), or opacity: 0.999 added to the canvas — none restores the rounding. Adding a trivial opaque mask-image: linear-gradient(#fff,#fff) to the canvas DOES restore it (see analysis below).

Originally hit while embedding a PlayCanvas gaussian-splat viewer; the repro is engine-free — any large continuously-presenting WebGL canvas triggers it.

Actual results:

The large (300×230 CSS) canvas paints with SQUARE corners — the ancestor's rounded clip is not applied — while every computed style is correct (container border-radius, overflow hidden, canvas geometry identical to the container).

The small (150×115) canvas stays correctly rounded. After pressing "stop", the large canvas BECOMES rounded — consistent with the idle surface being snapshotted back into the clipped picture tree, while the live surface is composited as an unclipped promoted surface.

Analysis (gfx/wr/webrender/src/tile_cache/mod.rs, can_promote_to_surface): a clip chain that needs_mask normally refuses overlay promotion (OverlayNeedsMask), but the CompositorKind::Layer carve-out accepts a single well-behaved ClipItemKind::RoundedRectangle (is_supported_rounded_rect) and promotes anyway, trusting the native layer to apply the rounded clip — which it does not appear to do on macOS. This matches the workaround matrix: an opaque no-op mask fails the carve-out, promotion is refused, and WebRender's own compositing rounds the corners correctly; clip-path lowers to exactly the rounded-rect clip the carve-out accepts (still square), and opacity never enters the clip chain (still square). Chrome renders all variants correctly. This looks like the canvas sibling of bug 1869994 (video losing rounding, fixed in 122).

Expected results:

Both canvases clipped to their containers' rounded corners, per CSS Backgrounds and Borders §5.3 (corner clipping): content is clipped to the border-radius curve whenever overflow is not visible — regardless of compositor surface promotion.

Comment 1

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:gw, could you have a look please?

For more information, please visit BugBot documentation.