He estado trabajando en un proyecto y, como era de esperar, Safari está lanzando una bola curva. Es un proyecto personal, por lo que realmente no me importa la compatibilidad del navegador, pero esto me molesta más que nada.
El proyecto depende en gran medida de la propiedad de transformación CSS. Safari dice que es un "valor de propiedad no admitido". Anteponer -webkit- no hace la diferencia.
El proyecto en vivo se puede encontrar en https://confetti.semhak.dev y el código fuente en https://github.com/grabbels/jsconfetti/
Si abre la página en vivo en los navegadores modernos, ocurre el comportamiento esperado, se colocan copos de confeti aleatoriamente hacia afuera desde el centro. Sin embargo, en Safari, Safari no reconoce las propiedades de transformación CSS en línea.
Ejemplo del css en línea marcado como no compatible con Safari:
transform: translate(-202.29527231536557px, -121.38897026273652px) scale(108.7192227372199%, 35.79831998128447%) rotate(301.3939182144637deg)Tenga en cuenta que anteponer -webkit- al controlador de transformación no parece ayudar.
¿Simplemente no veo un error flagrante o Safari es realmente tan obstinado/roto?
Aparentemente, Safari no puede tomar valores porcentuales en escala, tienen que ser decimales. Así que esto debería funcionar:
escala (1.087192227372199, 0.3579831998128447)