Been working on a project and wholly unsurprisingly Safari is throwing a curveball. It's a personal project so I don't really care for browser compatibility but this just bugs me beyond all else.

The project is heavily dependant on the CSS transform property. Safari says it's an "Unsupported property value". Prepending -webkit- doesn't make a difference.

The live project can be found on https://confetti.semhak.dev and the source code on https://github.com/grabbels/jsconfetti/

If you open the live page in modern browsers the expected behaviour happens, confetti flakes are placed randomly outward from the center. In Safari however, Safari doesn't recognize the inline css transform properties.

Example of the inline css being marked as unsupported by Safari:

transform: translate(-202.29527231536557px, -121.38897026273652px) scale(108.7192227372199%, 35.79831998128447%) rotate(301.3939182144637deg)

Note that prepending -webkit- to the transform handle does not seem to help.

Am I just not seeing a blatant mistake or is Safari really this stubborn/broken?