Bug 262001
| Summary: | -webkit-backdrop-filter disappears when element's width is changed with a transition | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | salve.sono.tommyy |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | ahmad.saleem792, karlcow, mattwoodrow, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 17 | ||
| Hardware: | All | ||
| OS: | All | ||
| URL: | https://jsfiddle.net/xswdky17/show | ||
salve.sono.tommyy
HTML elements with a set -webkit-backdrop-filter (for example "-webkit-backdrop-filter: blur(50px)") show up with no backdrop filter at all when their width is changed and a transition is applied to the element. For example:
CSS:
div {
backdrop-filter: blur(25px);
background: rgb(128, 128, 128, 0.5);
height: 100px;
transition: width 1s;
-webkit-backdrop-filter: blur(25px);
width: 100px;
}
HTML:
<div id="myDiv" />
JS:
let div = document.getElementById("myDiv");
setTimeout(() => {
div.style.width = "50px";
}, 500);
As you can see, the div's width will change to 50px after 5 seconds but the backdrop filter will disappear, which is not what's supposed to happen.
Set the background for the document's body to an image or a gradient to actually see the div's backdrop filter when its width is set to 100px.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Ahmad Saleem
I change the test case from Comment 0 into JSFiddle and linked in the URL field.
I am not clear on expected behavior or what is wrong, since trying across Chrome Canary 119, Firefox Nightly 119, Safari 16.6 and Safari Technology Preview 179, all browsers is doing same thing IMO.
Please share reference screenshot of incorrect bug and also removed added 'Keywords'.
Radar WebKit Bug Importer
<rdar://problem/116285603>