[Webkit-unassigned] [Bug 262001] New: -webkit-backdrop-filter disappears when element's width is changed with a transition

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=262001

            Bug ID: 262001
           Summary: -webkit-backdrop-filter disappears when element's
                    width is changed with a transition
           Product: WebKit
           Version: Safari 17
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: salve.sono.tommyy at icloud.com

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230923/cf79f208/attachment.htm>