Solucionando Problemas de Renderizado en Safari con Shepherd.js

A veces, las librerías de terceros no funcionan como se espera en todos los navegadores. Recientemente, me encontré con un problema al usar Shepherd.js, una librería para crear recorridos interactivos en una aplicación web, donde el tour no se renderizaba correctamente en Safari.

El Problema: Shepherd.js No se Renderiza en Safari

El tour de Shepherd.js aparecía como un modal vacío en Safari, aunque la capa de superposición (overlay) sí se mostraba. Esto indicaba que los estilos base necesarios para la estructura del tooltip no se estaban aplicando correctamente.

La Solución: Importar Estilos CSS Base y Prefijos de Proveedor

La solución implicó varios pasos:

1. Importar los estilos CSS base de Shepherd.js: Se importó el CSS base de Shepherd para asegurar que los estilos estructurales (como opacity, visibility, box-sizing y flex layout) estuvieran presentes. Estos estilos eran cruciales para la correcta visualización del tooltip.
2. Añadir prefijos de proveedor específicos para Safari: Se agregaron prefijos de proveedor para Safari para asegurar la compatibilidad con las propiedades CSS utilizadas por Shepherd.js.
3. Implementar cierre con clic en el overlay y con la tecla Escape: Se añadió la funcionalidad para cerrar el tour haciendo clic en la capa de superposición y presionando la tecla Escape, mejorando la experiencia del usuario.
4. Añadir un timeout de seguridad: Se implementó un timeout que cancela automáticamente el tour si el tooltip no se renderiza dentro de un tiempo determinado. Esto previene que la aplicación quede bloqueada si el tour falla al inicializarse.

Aquí un ejemplo de como se puede configurar el tour con las opciones mencionadas:

const tour = new Shepherd.Tour({
 defaultStepOptions: {
 cancelIcon: {
 enabled: true
 },
Class: 'class-custom',
 exitOnEsc: true,
 useModalOverlay: true,
 },
useModalOverlay: true,
 exitOnEscapeKey: true
});

setTimeout(() => {
 if (!tour.isActive()) {
 tour.cancel();
 }
}, 5000); // Cancela el tour si no se inicializa en 5 segundos

Lecciones Aprendidas

Este incidente subraya la importancia de probar las librerías de terceros en todos los navegadores objetivo. Además, destaca la necesidad de comprender cómo los estilos CSS y JavaScript interactúan para asegurar una renderización consistente. La implementación de medidas de seguridad, como el timeout, puede prevenir problemas mayores en la experiencia del usuario.