www.saude.gov.br - "Share" overlay design is broken (because FB embed uses backdrop-filter: blur())

[softvision-oana-arbuzov]

URL: https://www.saude.gov.br/#z

Browser / Version: Firefox Nightly 77.0a1 (2020-04-07)
Operating System: Windows 10 Pro
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items not fully visible
Steps to Reproduce:

1. Navigate to https://www.saude.gov.br/#z
2. Click the "Share" button.
3. Observe elements.

Expected Behavior:
Video preview is blurred and text and buttons are visible.

Actual Behavior:
Text and buttons are hardly visible.

Notes:

1. Screenshot attached.
2. The issue is not reproducible on Chrome 80.0.3987.162.

Watchers:
@softvision-oana-arbuzov
@softvision-sergiulogigan
@cipriansv

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[miketaylr]

Looks like this is a FB embed (it wasn't visible until I disabled TP)

<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fminsaude%2Fvideos%2F2594197360902055%2F&amp;show_text=0&amp;width=750" style="border: none; overflow: hidden;" 
scrolling="no" 
allowtransparency="true" 
allowfullscreen="allowfullscreen" 
width="750" 
height="400" 
frameborder="0"></iframe>

https://www.facebook.com/rsrc.php/v3/y_/l/0,cross/ZhMK0rE3VOH.css?_nc_x=Ij3Wp8lg5Kz

._90ic {
    align-items: center;
    backdrop-filter: blur(10px) brightness(.5);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    opacity: 1;
    pointer-events: auto;
    transition: all var(--fds-duration-short-in) var(--fds-animation-fade-in);
    width: 100%;
}

Devtools is showing an "invalid property name" error for the backdrop-filter rule. 🤔

[miketaylr]

So, this is just because backdrop-filter isn't enabled by default yet. The bug tracking that is https://bugzilla.mozilla.org/show_bug.cgi?id=1578503

[lock]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.