El otro día, me encontré con ese problema. El código generado del lado del servidor se negó a hidratarse en Safari.
La hidratación se refiere a un proceso del lado del cliente durante el cual Vue toma el HTML estático enviado por el servidor y lo convierte en un DOM dinámico que puede responder a los cambios de datos en el lado del cliente. Más detalles aquí .
"Prod" simplemente cayó, y la versión de desarrollo informó que había discrepancias en dom. Y dado que la versión de desarrollo no se bloquea al intentar hidratarse, sino que solo lo informa en la consola, el error no fue obvio y, aunque lo encontramos, pasó bastante tiempo.
¡Una estrategia muy interesante de Vue es esperar la producción y caer allí!
Mil quinientos componentes de diversa complejidad no simplificaron la tarea. Como resultado, logré ver el problema, encontrar un dispositivo adecuado y hacerme amigo de la consola del desarrollador.
Como resultado, resultó que nuestra aplicación se bloquea cuando se conecta el componente de pie de página. Y cuando encontraron la línea correcta, simplemente no creyeron en sus ojos. Esperaba cualquier cosa menos esto.
Resultó que cuando eliminaste el número de teléfono, la hidratación se realizó sin problemas. Cuando comenzaron a cavar, resultó que Safari, después de recibir el diseño html, sustituyó una etiqueta al lado del teléfono, lo que causó, de hecho, el marcador.
Naturalmente, cuando comenzó la hidratación, el dom de la página que provenía del servidor y el virtual recién construido no coincidían. La aplicación se bloqueó sin declarar la guerra.
Este problema también se resolvió de manera inesperada. Hasta ahora, insertamos el teléfono de la manera habitual:
<div>8 (800) 111 2 333</div>
La solución fue v-text vinculante:
<div v-text=”8 (800) 111 2 333”></div>
Tengo una teoría sobre esto. Si alguien puede confirmarlo o refutarlo (sugiriendo uno nuevo), estaré muy agradecido. Según tengo entendido, después de que Safari recibió el documento, Vue crea un dom virtual y lo compara con este documento, y mientras lo hidrata, Safari hace su trabajo oscuro y cambia el teléfono a un enlace. Cuando se trata de este campo, Vue con v-text nuevamente reemplaza el contenido de nuestro div con lo que necesitamos. Como resultado, en el momento de la comparación, los doms coinciden, el vuelo es normal.