2

Estoy desarrollando una pequeña librería/plugin en JavaScript que sirve para resaltar diferentes partes de una página (con la intención de crear instrucciones o similares). Pero me estoy encontrando con algunos problemas, especialmente con Safari.

Para el resaltado uso box-shadow porque presenta mejor compatibilidad que clip-path. Creo un elemento con dos sombras: una interna (para dar efecto de difuminado) y otra externa (que sombreará todo la página menos el objeto centrado).

Aquí dejo un ejemplo mínimo, completo y verificable del código que tengo:

#sp-frame {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#sp-focus {
  position: absolute;
  top: 50px;
  left: 100px;
  width: 80px;
  height: 50px;
  border-radius: 100%;
  box-shadow: inset 0 0 8px 0 rgba(0,0,0,0.8), 0 0 0 200vmax rgba(0,0,0,0.4);
}
<div id="sp-frame">
  <div id="sp-focus">
    
  </div>
</div>


La idea es que se vea así:

sombreado correcto

Pero el problema es que en iPhone y Safari se ve así:

sombreado incorrecto


Probé las soluciones propuestas en Problema de compatibilidad con box-shadow, añadiendo los prefijos de navegador -webkit-box-shadow y -moz-box-shadow... Sin obtener un resultado positivo. También probé -webkit-appearance como se sugiere en Apariencia diferente de botones en safari iOS. También sin obtener el resultado esperado.

Para iPhone, encontré una solución un poco rara: si en lugar de poner border-radius: 100%, uso border-radius: 99%, entonces el sombreado externo se ve bien (como en la primera imagen). Pero eso no funciona en Safari.

Inicialmente pensaba que era un problema con la unidad vmax porque si ponía un valor en px (p.e. 200px) sí se veía bien. Por eso traté de calcular el ancho de pantalla con JavaScript y asignar ese valor * 2 a la sombra... Pero después de hacer algunas pruebas, me encuentro con que eso tampoco sirve.

Safari soporta vmax en la sombra, el verdadero problema es que si el valor generado es mayor que X (con X alrededor del tamaño de la pantalla aproximadamente), esa sombra deja de verse. Y eso es un problema, porque necesito que sea mayor que el tamaño de pantalla para asegurarme que no se van a quedar zonas de la pantalla sin sombrear.

¿Cómo puedo solucionar esto? ¿Existe alguna alternativa?

1 respuesta 1

1

Kosh Very me envió una pregunta con un problema parecido en el sitio en inglés. En ella, responde que esto es un fallo que se produce en Safari cuando se usa un box-shadow con un valor muy grande combinado con un border-radius (probé y efectivamente si quito el border-radius, la sombra se ve bien incluso con 200vmax). Parece un bug de Safari, aunque no encontré referencia.

La solución que propone en su respuesta es usar un borde con el tamaño grande en lugar de usar un box-shadow. Esa solución requiere un cambio adicional (añadir una transformación con una translación), pero me sirve como alternativa porque funciona en Chrome también.

Aquí dejo el código:

#sp-frame {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#sp-focus {
  position: absolute;
  top: 75px;
  left: 140px;
  width: 80px;
  height: 50px;
  border-radius: 100%;
  box-shadow: inset 0 0 8px 0 rgba(0,0,0,0.8);
  border: 200vmax solid rgba(0,0,0,0.4);
  transform: translate(-50%, -50%);
}
<div id="sp-frame">
  <div id="sp-focus">
    
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.