iPad webkit border-image problema de renderización css

El uso de la propiedad border-image css en un sitio tiene extraños artefactos de representación en el iPad (suponiendo que todos los dispositivos ios tengan el mismo problema). Básicamente se trata de agregar pequeñas líneas donde la imagen se está cortando de acuerdo con el CSS. Ver imagen como referencia: alt text iPad webkit border-image problema de renderización css

Hacer ciertas cosas hará que las líneas desaparezcan, como acercar o mover el div al que lo he aplicado. Supongo que se trata de un error de renderizado en el safari móvil, pero ¿alguien tiene alguna idea/sugerencia sobre cómo solucionarlo?

debo añadir que esta se representa correctamente en todos los navegadores de escritorio que apoyan la propiedad: Safari, Chrome, Firefox, etc.

Fuente

2010-12-02 beardedd

Estoy bastante seguro de si hace zoom in/out con Safari en la versión de escritorio que se ve el mismo problema En ocasiones, se amplían fracciones de píxeles y webkit no sabe realmente qué hacer con los subpíxeles.

Trate de añadir a la cabeza:

<meta name="viewport" content="initial-scale=1">

De esa manera la vista por defecto será bueno. También podría deshabilitar el zoom, pero no lo recomendaría a menos que sea un sitio web diseñado específicamente para el iPad.

Fuente

2010-12-02 22:54:57 Duopixel

sí, que lo hizo - gracias por la punta! – beardedd

¡También para mí! ¡Respuesta impresionante! –

¡GRACIAS! Esto también me solucionó un problema. Tenía un SVG codificado en base64 como imagen de fondo y funcionaba bien en los escritorios en todos los navegadores. En iPad Air, tanto en Safari como en Chrome, se procesó como una "cuadrícula" debido a un borde de 1px alrededor de cada repetición de la imagen. 2 horas de golpes en la cabeza terminaron aquí con tu respuesta. @Duopixel tu rock. –

La escala de la imagen hecha en el zoom parece tomar el ruido de los siguientes píxeles en la imagen (¿quizás un problema de redondeo?). Agregar una línea de memoria intermedia de 1px a las partes de la imagen funcionó para mí.

Fuente

2011-01-28 10:40:08 Marcus

¡Gracias por la sugerencia! Finalmente pude resolver mi problema eliminando el exceso de espacio vacío alrededor de la imagen que estaba escalando. – miek

Pasé un tiempo golpeando mi cabeza contra una pared antes de descubrir esto. Qué bueno si te salvó ese problema :). – Marcus

Éste nos ha estado molestando por bastante tiempo.

Encontramos que las líneas desaparecieron cuando utilizamos tramo en lugar de repetición o ronda en el valor de border-image: así por ejemplo:

-webkit-border-image: url(image.png) 50 stretch;

puede comprobarlo usted mismo yendo a http://border-image.com/ en su dispositivo iOs y cambiando el parámetro de estiramiento.

(jugar un poco con los valores de desplazamiento de allí, porque el autor de la página utiliza convenientemente una imagen Frontera que ya tiene un color de fondo, donde en el dispositivo iOS se podrían obtener las líneas transparentes.)

Fuente

2011-11-22 11:36:28 NullElement

Habilitar aceleración de hardware en la imagen confinada para solucionar este problema:

-webkit-transform: translate3d(0, 0, 0)

Fuente

2016-03-31 23:03:10 theo

iPad webkit border-image problema de renderización css

Respuesta

Cuestiones relacionadas