@-webkit-keyframes ignored in Keyframes animation – no cross-browser support

[goransipic]

I’m defining a simple spinner animation using Kobweb’s Keyframes. And there is edge case for @-webkit-keyframes. The resulting CSS works fine in modern browsers like Chrome and Firefox, but fails to animate in Safari due to the lack of @-webkit-keyframes.

Here’s my CSS code:

.page-spinner { 
    animation: spinner .75s linear infinite; 
}

@-webkit-keyframes spinner { 
    100% { 
         -webkit-transform: rotate(360deg); transform: rotate(360deg); 
    } 
}

@keyframes spinner { 
    100% { 
       -webkit-transform: rotate(360deg); transform: rotate(360deg);
   } 
}

However, when inspecting the generated Kotlin code, I notice that the @Keyframes rule is emitted correctly, but @-webkit-keyframes is not included. This causes animations to break in WebKit-based browsers (Safari, older Android WebViews, etc.).

val PageSpinnerStyle = CssStyle.base {
	Modifier
		.animation(
			Spinner.toAnimation(
				duration = 0.75.s,
				timingFunction = AnimationTimingFunction.Linear,
				iterationCount = AnimationIterationCount.Infinite
			)
		)
}
val Spinner = Keyframes {
	100.percent {
		Modifier
			.styleModifier { property("-webkit-transform", "rotate(360deg)") }
			.transform { rotate(360.deg) }
	}
}

Suggestion:

It would be great if Keyframes in Kobweb could automatically generate both @Keyframes and @-webkit-keyframes, or provide a way to specify prefixed versions manually.

Thanks for great library.