Estoy trabajando en el proyecto React e implementé un generador de gradiente que se usa para íconos. El problema es que en Chrome todo funciona bien, pero Safari muestra el ícono normalmente solo la primera vez, por ejemplo, si realizo alguna acción de actualización como cambiar la vista a móvil o cambiar el estado del componente, se vuelve negro. Cuando cambio entre íconos, se regenera hasta que repito el escenario.
Leí que el problema común con Safari es que la ruta de la URL no se resuelve correctamente, pero como puede ver, ya lo hice, no funciona incluso cuando la ruta está codificada. También intenté deshabilitar la representación del lienzo en Safari.
<svg width={72} height={26} > <defs> <linearGradient id={object.id}> {this.generateStops(object.depthColors ? object.depthColors : [])} </linearGradient> </defs> <rect width={72} height={26} fill={`url(${window.location.href}#${object.id})`}/> </svg> Creo que no agregaré más código ya que el problema no es con la generación de paradas, siempre devuelve paradas generadas correctamente. También traté de agregar varios parámetros a svg como id , viewbox , pero no ayudó.
Lo que terminé haciendo es esto:
const random = Math.random().toString(); return ( <svg width={72} height={26} > <defs> <linearGradient id={random}> {this.generateStops(colorPalette.depthColors ? colorPalette.depthColors : [])} </linearGradient> </defs> <rect width={72} height={26} fill={`url(#${random})`}/> </svg> );La versión anterior también usaba identificaciones únicas para la generación de degradados, pero no se actualizaba cada vez que se seleccionaba el mismo degradado.