glass.motion.dev - Design is broken

[Adzetko]

URL: https://glass.motion.dev/

Browser / Version: Firefox 123.0 Operating System: Mac OS X 10.15 Tested Another Browser: Yes Chrome

Problem type: Design is broken Description: Items not fully visible Steps to Reproduce: The backdrop-filter used on some elements of this site (e.g. : in the "Optic Effects" demo) doesn't work on Firefox & Safari, it looks like the url(#R6b4im) (linking to a SVG filter ID in the DOM) is in cause.

On Safari, it falls back to the -webkit-backdrop-filter property, which only has the blur(4.5px) applied, which works fine (without the intended "optical effect" applied), but on Firefox there's no fallback possible to my knowledge.

The weird part is that the Firefox dev tools does not lint that the value is invalid (at least for Firefox itself).

(screenshot: Chrome on the left, Firefox in the middle, and Safari on the right)

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[Adzetko]

Okay it looks like I totally misinterpreted the problem on Firefox (which makes it kinda normal the dev tools couldn't lint an invalid value, as the value itself is valid), apparently it's more about how Firefox doesn't support fragment identifier inputs to the feImage SVG element. It has to be put all inline. Source: https://stackoverflow.com/questions/65204796/css-svg-filter-urlelement-not-working-in-firefox-and-has-strange-behavior-in#comment115316819_65204796 and https://stackoverflow.com/questions/13925736/inline-svg-filter-in-css

[ailioaie]

Thank you for reporting this issue, I was able to reproduce it. Indeed in Firefox I see differences comparative with Chrome and Safari:

Tested on: • Browser / Version: Firefox Nightly 126.0a1 (2024-03-19) / Firefox Release 124.0 / Chrome 122.0.6261.129 /Safari Version 17.1 (18616.2.9.11.10, 18616) • Operating System: MacOS Ventura 13.6.1

Notes:

1. Reproducible on Firefox Release and Nightly
2. Reproducible regardless of settings of Enhanced Tracking Protection
3. Not reproducible on Chrome and Safari.

Moving to Needsdiagnosis.

[qa_12/2024]