297620 2025-08-19 14:50:31 -0700 REGRESSION (Safari 18.x): backdrop-filter does not work when referencing CSS variable on macOS Sonoma 2026-02-12 01:05:07 -0800 1 1 1 Unclassified WebKit Layout and Rendering Safari 18 Mac (Apple Silicon) macOS 14 NEW https://bugs.webkit.org/show_bug.cgi?id=289800 InRadar P2 Normal --- 1 jordan webkit-unassigned bfulgham b.houdusse simon.fraser webkit-bug-importer zalan oldest_to_newest 2137536 0 476457 jordan 2025-08-19 14:50:31 -0700 Created attachment 476457 Example file that showcases the bug REGRESSION (Safari 18.x): Backdrop Blur does not work when using variable on macOS Sonoma The following document does not apply a backdrop filter when using macOS Sonoma and Safari 18.6. Later OS versions work as expected: ```html <style> .blur-value-in-var { --a: 25px; -webkit-backdrop-filter: blur(var(--a)); backdrop-filter: blur(var(--a)); } .container { position: relative; } .overlay { position: absolute; inset: 1rem; width: 4rem; background-color: rgb(127 127 127 / 0.25); } .block { background: black; width: 4rem; height: 4rem; } </style> <div class="container"> <div class="overlay blur-value-in-var"></div> <div class="block"></div> </div> ``` It seems to break whenever the filter uses a `var(…)` function. This can be the value portion or the entire filter function inside the variable. Additionally, I discovered that the unprefixed `backdrop-filter` property *does not work at all* Safari 18.6 on macOS Sonoma while it does in Sequoia and above. I've attached a file with a couple more test cases. Tested: - macOS 14.6.1 + Safari 17.6 - works (except for unprefixed backdrop-filter obvs) - macOS 14.6.1 + Safari 18.6 - broken - macOS 14.7.7 + Safari 18.6 - broken - macOS 14.7.7 + Safari TP - broken - macOS 15.6 + Safari 18.6 - works - macOS 26 b7 + Safari 26 - works - macOS 26 b7 + Safari TP - works Notes: - I don't know the exact version of Safari this regressed in but I *think* its some version of 18 given that Safari 17.6 worked - I wasn't able to test 298917@main on Sonoma w/ Safari 17.6 because it won't open any Safari windows. - I wasn't able to test 298917@main on Sonoma w/ Safari 18.6 because it crashes. 2137867 1 webkit-bug-importer 2025-08-20 17:00:29 -0700 <rdar://problem/158810759> 2145412 2 simon.fraser 2025-09-23 18:14:16 -0700 Does this still reproduce in Safari in the final version of macOS Tahoe? 2164296 3 jordan 2025-12-08 17:55:19 -0800 No, this does not reproduce on Safari 26.1 + macOS 26. But it *does* reproduce when using Safari 26.1 on macOS 14.8.2 (at least in a virtual machine). 476457 2025-08-19 14:50:31 -0700 2025-08-19 14:50:31 -0700 Example file that showcases the bug bug.html text/html 871 jordan PHN0eWxlPgogIC5ibHVyLXZhbHVlLWluLXZhciB7CiAgICAtLWE6IDI1cHg7CiAgICAtd2Via2l0 LWJhY2tkcm9wLWZpbHRlcjogYmx1cih2YXIoLS1hKSk7CiAgICBiYWNrZHJvcC1maWx0ZXI6IGJs dXIodmFyKC0tYSkpOwogIH0KCiAgLmJsdXItZm4taW4tdmFyIHsKICAgIC0tYTogYmx1cigyNXB4 KTsKICAgIC13ZWJraXQtYmFja2Ryb3AtZmlsdGVyOiB2YXIoLS1hKTsKICAgIGJhY2tkcm9wLWZp bHRlcjogdmFyKC0tYSk7CiAgfQoKICAuYmx1ci1uby12ZW5kb3IgewogICAgYmFja2Ryb3AtZmls dGVyOiBibHVyKDI1cHgpOwogIH0KCiAgLmNvbnRhaW5lciB7CiAgICBwb3NpdGlvbjogcmVsYXRp dmU7CiAgfQoKICAub3ZlcmxheSB7CiAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICBpbnNldDog MXJlbTsKICAgIHdpZHRoOiA0cmVtOwogICAgYmFja2dyb3VuZC1jb2xvcjogcmdiKDEyNyAxMjcg MTI3IC8gMC4yNSk7CiAgfQoKICAuYmxvY2sgewogICAgYmFja2dyb3VuZDogYmxhY2s7CiAgICB3 aWR0aDogNHJlbTsKICAgIGhlaWdodDogNHJlbTsKICB9Cjwvc3R5bGU+CjxkaXYgY2xhc3M9ImNv bnRhaW5lciI+CiAgPGRpdiBjbGFzcz0ib3ZlcmxheSBibHVyLXZhbHVlLWluLXZhciI+PC9kaXY+ CiAgPGRpdiBjbGFzcz0iYmxvY2siPjwvZGl2Pgo8L2Rpdj4KPGRpdiBjbGFzcz0iY29udGFpbmVy Ij4KICA8ZGl2IGNsYXNzPSJvdmVybGF5IGJsdXItZm4taW4tdmFyIj48L2Rpdj4KICA8ZGl2IGNs YXNzPSJibG9jayI+PC9kaXY+CjwvZGl2Pgo8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogIDxkaXYg Y2xhc3M9Im92ZXJsYXkgYmx1ci1uby12ZW5kb3IiPjwvZGl2PgogIDxkaXYgY2xhc3M9ImJsb2Nr Ij48L2Rpdj4KPC9kaXY+Cg==