mdn / mdn/browser-compat-data

css.properties.backdrop-filter - Support differs in FF v other browsers

Open
#19,042 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

browser:multiple data:css on hold
Dominant language
JSON
Stars
5.8k
Forks
2.6k
Avg merge
1d 21h
Merged PRs (30d)
186

Description

What type of issue is this?

Incorrect support data (ex. Chrome says "86" but support was added in "40")

What information was incorrect, unhelpful, or incomplete?

Chrome/Edge/Safari ignore nested backdrop-filter values AND ignore backdrop filter on inline elements. Even when prefixed.

Firefox applies backdrop-filters to nested elements and to inline elements.

What browsers does this problem apply to, if applicable?

No response

What did you expect to see?

I expected to see the FF behavior in terms of nested values, but am not sure if that implementation is correct. It seems to be:

See https://github.com/w3c/fxtf-drafts/issues/500.

I did not expect to see inline elements ignoring the values. I do not see in the spec that this should not apply to inline elements.

Did you test this? If so, how?

https://codepen.io/estelle/pen/LYJWOrW and https://codepen.io/estelle/pen/XWPRXWd

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

https://bugs.chromium.org/p/chromium/issues/list?q=backdrop-filter&can=2

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

MDN metadata
MDN page report details
  • Query: css.properties.backdrop-filter
  • Report started: 2023-03-03T00:25:29.567Z

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the css.properties.backdrop-filter compatibility entry and reproduce the linked CodePen cases for nested and inline elements. Review the linked FXTF discussion and browser evidence to determine the expected behavior, then update the support data only once the specification and implementation differences are resolved.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.