Web-bugs: actualidad.rt.com - Missing top bar blurred effect over images

[IngrownMink4]

URL: https://actualidad.rt.com/actualidad/363979-empresas-eeuu-podrian-seguir-utilizar-wechat/amp?__twitter_impression=true

Browser / Version: Firefox Mobile 81.0
Operating System: Android
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items not fully visible
Steps to Reproduce:
The header of the website has a blur effect on CSS but for some reason, Firefox shows it transparent, does not display it with blur as Chromium-based browsers...

View the screenshot

Browser Configuration

• None

_From webcompat.com with ❤️_

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue. After scrolling down until reaching the first image, the top bar is displayed transparent over the image (Firefox) instead of being blurred (Chrome).

Note: The issue is not reproducible on Chrome.

Tested with:
Browser / Version: Firefox Nightly 81.0a1 (2020-08-23)
Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[karlcow]

.page-header {
    position: fixed;
    width: 100%;
    z-index: 300;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255,255,255,0.72);
}

backdrop-filter is a blink/webkit thing implemented in Firefox but behind a flag layout.css.backdrop-filter.enabled that can be enabled in about:config.

https://bugzilla.mozilla.org/show_bug.cgi?id=1578503

[karlcow]

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1578503