pwa - Error de representación de bordes en Safari mobile

web app ipad

Question

¿Tengo fronteras renderizadas extrañas en elementos que no tienen fronteras en Safari Mobile? ¿Alguna idea sobre qué puede causar el problema? No pude encontrar una solución. Gracias de antemano por tu ayuda.

Answer 1

¿Obtienes líneas finas en los bordes de las imágenes? Más delgado que 1px?

Si es así, parece estar relacionado con la forma en que el navegador escala las imágenes al hacer zoom. Parece tomar algunos datos de la siguiente línea en la imagen y usarlos como parte de la interpolación de la imagen.

Lo resolví agregando 1 línea de píxeles de fondo a la imagen. No es ideal, lo sé, pero fue la única solución que encontré que funcionó.

Answer 2

Tuve el mismo problema. No se pudo encontrar la causa, pero se resolvió con un truco, al agregar un borde transparente al elemento:

border: 1px solid transparent;