NEW262001
-webkit-backdrop-filter disappears when element's width is changed with a transition 
https://bugs.webkit.org/show_bug.cgi?id=262001
Summary -webkit-backdrop-filter disappears when element's width is changed with a tra...
salve.sono.tommyy
Reported 2023-09-23 10:25:43 PDT
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
Comment 1 2023-09-23 17:23:34 PDT
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
Comment 2 2023-09-30 10:26:11 PDT
<rdar://problem/116285603>
Note You need to log in before you can comment on or make changes to this bug.