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í:
Pero el problema es que en iPhone y Safari se ve así:
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?