An element with backdrop-filter: blur which extends below the visible area of the screen is not rendered correctly
Categories
(Core :: Graphics: WebRender, defect)
Tracking
()
People
(Reporter: hugge852, Unassigned)
References
(Blocks 1 open bug)
Details
Attachments
(2 files)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:126.0) Gecko/20100101 Firefox/126.0
Steps to reproduce:
- On a blank page, set a background-image which fills the entire page.
- Create a <div> with backdrop-filter: blur(25px) which extends below the visible area of the screen f. e. by height or by margin-top. (25px for the blur just as an example)
Actual results:
Just above the bottom of the screen, the blur is not visible and gradually fades in towards the top. When you scroll, this persists until you reach the bottom of the div. Only then the blur is rendered correctly.
Expected results:
The blur should be rendered correctly up to the bottom of the screen, even if the div extends below it.
I’ve attached an mp4 file to illustrate the issue.
I can reproduce this issue with a new profile and also on different devices.
In Chrome, this issue doesn’t occur.
|
||
Comment 1•6 months ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Graphics: WebRender' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Updated•6 months ago
|
|
||
Comment 3•3 months ago
|
||
Can you attach a reduced testcase that reproduces the issue for you?
It seems to depend on the "background-attachment: fixed;" for the <body> tag. When it’s removed or deactivated, no fade occurs between the bottom of the screen and the <div>.
|
|
||
Comment 6•3 months ago
|
||
Thanks. I can confirm the issue.
Description
•