1934039 - Some websites escape the corner clip from bug 1908471 (due to backdrop-filter)

Status: RESOLVED FIXED

(Core :: Graphics: WebRender, defect, P1)

Description

[Emilio Cobos Álvarez [:emilio]]

E.g. https://developer.apple.com/ escapes the corner, so does zoom video calls.

I bet it has to do with backdrop-filter because https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter shows it but https://developer.mozilla.org/ doesn't.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1908471

:nsharpley, since you are the author of the regressor, bug 1908471, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 2

[Nikki Sharpley (:nikkis) (she/her)]

That's interesting! You're right, it looks like backdrop-filter doesn't respect the overflow: hidden rule of the parent browser and paints above it?...

I'm working on a solution similar to the snippet Markus posted in bug 1908471, comment 5. We might be able to use a mask, though it gets complicated with using the toolbar background... see attachment

Comment 3

[Nikki Sharpley (:nikkis) (she/her)]

Attachment: Screenshot 2024-11-28 at 3.09.48 PM.png

Example fix in progress

Comment 4

[Nikki Sharpley (:nikkis) (she/her)]

Attachment: WIP: Bug 1934039 - Use a CSS mask to round content area corner

In bug 1908471 we used a border-radius, however some website use backdrop-filter for their
background which doesn't respect the overflow: hidden rule we added with the border-radius.

Using a neighbouring element as a mask resolves that issue.

WIP - still need to get IntersectionObserver working and update based on tabbrowser-tabbox
position and need to get mask appearance working for RTL mode and when the sidebar is positioned
at the end.

Comment 5

[Sarah Clements [:sclements]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #0)

E.g. https://developer.apple.com/ escapes the corner, so does zoom video calls.

I bet it has to do with backdrop-filter because https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter shows it but https://developer.mozilla.org/ doesn't.

Emilio, is this something that can be fixed on the core side?

Comment 6

[Emilio Cobos Álvarez [:emilio]]

Ideally, yes. This seems clearly like a WebRender bug to me (that's why I filed it here rather than in the sidebar component)... Not familiar enough with our backdrop-filter implementation to know whether this can be fixed easily or not. But in any case if we decide to move to a mask I'd do it in a dependent bug (as this bug would still be valid).

Glenn do you know off-hand what might be going on? In order to see this, you can flip sidebar.revamp=true on Nightly.

Comment 7

[[:userChrome.css]]

Attachment: Screenshot 2024-11-29 195627.png

I dont know if this relevant or not if not please ignore but I always used from this code for rounded browser frame and it never had any issues, I tried the linked websites and it looks fine.

https://github.com/KiKaraage/ArcWTF/blob/main/global/browser.css

The only lines I removed was 115-117 as it was causing pixelate corners.

Comment 8

[Bob Hood [:bhood]]

We'll be evaluating this type of thing when we discuss sidebar needs with Sarah in Q1 2025.

Comment 12

[Mauro B]

Hi!

I just want to add my 2 cents here:
Applying mix-blend-mode: multiply; to the tabbrowser-tabpanels seems to also replicate what overflow: clip does. This seems to work better than clip-path as well.

Comment 14

[Sotaro Ikeda [:sotaro]]

The problem seemed to be addressed with latest nightly.

:emilio, can you check if the problem is addressed?

With the following command, Bug 1955501 might address the problem.

./mach mozregression --find-fix --bad 2024-12-01 --pref sidebar.revamp:true -a https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/backdrop-filter

https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=41d19eec54b903b0ec284c661dade488339caa27&tochange=59fc351c66d4db2be8a525a0b3a0b1db839bf1d2

Comment 15

[Emilio Cobos Álvarez [:emilio]]

That sounds believable. I haven't seen this recently either.