`backdrop-filter: blur(…)` does not apply in some usages of `thead` elements
Categories
(Core :: Graphics: WebRender, defect)
Tracking
()
People
(Reporter: tylerjmorg, Unassigned)
References
(Blocks 1 open bug, )
Details
Attachments
(3 files)
Example of backdrop-filter not being applied.
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Steps to reproduce:
Create the follow DOM tree example:
<html> ... <body> ... <main> ... <div> ... <table> ... <thead style="background-color: rgba(49, 48, 49, 0.8); backdrop-filter: blur(5px);"> ... <tr> ... <th>Example</th>
Actual results:
The elements displays content under the element based on the color's alpha strength only. The backdrop-filter value is not active.
Expected results:
The backdrop-filter property should be active and apply a blur to content behind the element.
|
Reporter | |
Comment 1•3 months ago
|
||
|
|
Reporter | |
Updated•3 months ago
|
|
|
Reporter | |
Updated•3 months ago
|
|
|
Reporter | |
Updated•3 months ago
|
|
||
Comment 2•3 months ago
|
||
Could you upload a testcase or make one available on codepen or on a website somewhere?
|
||
Comment 3•3 months ago
|
||
Made a repro case myself: https://developer.mozilla.org/en-US/play?id=umvyaOy28smouvQObpSiABkzvu%2Fa3lWtEuLjBqCY0jlJ8d4Tb2O96unUMVbZ%2BNk1PquoV5ABdN8z1z5G
I adapted the first example from the MDN page for backdrop-filter with several element combinations using <thead>. Bare text within <thead> seems to exhibit this bug (more on this later). However, other combinations that I tried do work. See testcase.html.
Looking at MDN docs for <thead>, it seems like this bug may be because standard HTML usage (or, at least, Firefox's implementation of styling it) wasn't expecting to use <thead> with only bare text. It seems like <thead>s are expected to contain <tr><th> and/or <tr><td> structures; from the first paragraph in MDN:
The
<thead>HTML element encapsulates a set of table rows (<tr>elements), indicating that they comprise the head of a table with information about the table's columns. This is usually in the form of column headers (<th>elements).
Tentatively triaging as S3, since this seems like a bug, but outside recommended practices anyway. We might revisit this if this is a regression.
Speaking of which: Tyler, is this a regression from something previously working for you, or a case you discovered for the first time and reported? If this is a regression, I recommend you use mozregression to do a bisection search of when this issue regressed.
|
|
||
Updated•3 months ago
|
|
|
||
Updated•3 months ago
|
|
|
Reporter | |
Comment 4•3 months ago
|
||
Hi all,
Apologies for the late response.
Here's an example website (using GitHub Pages):
https://tylerjm.org/record-inventory/
The table head on this page does not show the backdrop-filter.
This is just a personal website I've been playing around in. I also have the code hosted on GitHub publicly, see https://github.com/tylerjmorg/tylerjm.org/tree/main/record-inventory
To clarify, there is no bare text in the <thead>, the <thead> only had the style attribute. In the section, only the <th> contains bare text.
According to the W3C HTML validator (https://validator.w3.org/nu/?doc=https%3A%2F%2Ftylerjm.org%2Frecord-inventory%2F), it does not find much wrong with WHATWG's spec.
This is not a regression as far as I'm aware.
Many thanks!
|
|
Reporter | |
Comment 5•3 months ago
|
||
Hi all,
I dug into this a little bit more.
It looks like the backdrop-filter is not applied when a border-radius is set to a div that encases a table element.
I've created a codepen: https://codepen.io/tylerjmorg/pen/QWRRqRb for this issue.
Let me know if this helps. Having a div encasing the table helps keep a thead's position sticky while allowing overflow-x: scroll for mobile views.
I hope this helps.
Thank you!
|
||
Updated•2 months ago
|
|
|
||
Comment 6•2 months ago
|
||
|
|
||
Updated•2 months ago
|
Description
•