Bug 302272 – Scroll pocket tint changes when position: fixed elements are shown (eg dialog/popover)

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: Layout and Rendering

[Ben Frain]

Created attachment 477350 [details]
reduction of issue

Currently, iOS 26.1, if a page has a dialog or popover element (or any fixed position element), when that item is shown, the background of that dialog/popover, overwrites the color of the theme-color/color tint background.

See attached reduction on iPhone/iPad and click the button. Notice how the tint area changes.

[Simon Fraser (smfr)]

Are you just talking about the dimming caused by

    &::backdrop {
        background-color: rgb(0 0 0 / 10%);
    }


or something more?

[Ben Frain]

(In reply to Simon Fraser (smfr) from comment #1)
> Are you just talking about the dimming caused by
> 
>     &::backdrop {
>         background-color: rgb(0 0 0 / 10%);
>     }
> 
> 
> or something more?

More. If you look on Safari esp. on ios, more noticeable if a web app page because the ‘forehead’ and ‘chin’ change colour as the popover shows

[Simon Fraser (smfr)]

Right, the dimming overlay doesn't cover the forehead and chin, which is really a Safari UI design issue.

[Ben Frain]

(In reply to Simon Fraser (smfr) from comment #3)
> Right, the dimming overlay doesn't cover the forehead and chin, which is
> really a Safari UI design issue.

Well it’s actually worse than that. Not only doesn’t the overlay/backdrop cover the forehead/chin — the forehead and chin change colour to be the same color as the background of the fixed element, not the background of the body

[Radar WebKit Bug Importer]

<rdar://problem/164594155>

[Wenson Hsieh]

This is fixed after https://commits.webkit.org/301911@main

*** This bug has been marked as a duplicate of bug 300965 ***