backdrop-filter blur not working in Safari

[sebastinto]

Using backdropFilter() with a blur() CSSFilter is not working in Safari.

This is reproducible by navigating to https://bitspittle.dev/blog/2022/kotlin-site in Safari and observing that the header backdrop is translucent instead of blurred.

Safari

Chrome

As a workaround in my project I'm using this which seems to be working fine:

fun Modifier.backdropFilter(vararg filters: CSSFilter) = styleModifier {
    if (filters.isNotEmpty()) {
        listOf("backdrop-filter", "-webkit-backdrop-filter").forEach {
            property(it, filters.joinToString(" "))
        }
    }
}

but since I'm not well-versed in web development, I'm unsure whether this is a proper fix.

• OS: MacOS
• Kobweb libs version: 0.17.1
• Kobweb CLI version: 0.9.15

[bitspittle]

BTW meant to thank you for filing this. I'm also glad you found and shared a workaround. I will look into updating the code in Kobweb.

I was trying to avoid the hacky "-webkit-" prefixes that seem to pervade so many projects, but more because I thought that was an indication that the CSS property was still experimental. However, backdrop-filter not working for Safari is kind of a big deal.

[bitspittle]

This should be fixed in 0.17.2 when it goes out (aiming for tomorrow, pending some local tests).