La image de background no se muestra correctamente en iOS

Estoy usando una image de background con mosaico en un website. El sitio es excelente en todos los browseres de escritorio, pero cuando veo el sitio en mi iPad Mini (con iOS 6.1.3), la image de background tiene rayas. Puede ver un patrón en la mayoría de las páginas que es una línea (el tamaño de la image de background) que se ve bien, luego otra línea del mismo tamaño de la image de background, etc.

Aquí hay una captura de pantalla que muestra los problemas:

Captura de pantalla de error de iPad

Aquí está el CSS requerido para el background:

#wrap { margin:0 auto; position:relative; padding:0; background: #B3B1B2 url(http://sofes.miximages.combgs/parchment2.jpg); } 

Intenté borrar el caching del iPad, pero eso no funcionó. No sé por qué está sucediendo esto. ¿Cómo prevengo y resuelvo este problema?

Actualizar

Creé un jsFiddle del envoltorio. Se veía bien en el website. Así que me deja asumir que está en algún lugar de mi código. Sin embargo, esto no siempre ocurre inmediatamente en el sitio. Puede suceder con el violín, pero no lo he visto. ¿Si es mi sitio cómo rastrear el código que está causando el problema?

Actualización 2

Cambié la image de background al html, body tags html, body y el problema aún sucede, pero no es tan malo y se borrará. Todavía me queda preguntándome cómo evito el problema en set.

Actualización 3

Probé la idea de @ Riskbreaker de cambiar a PNG. Esto no funcionó Todavía veo las líneas. También aumentó sustancialmente el file de background (de 30k a casi 200k). También probé una image de background completamente diferente pensando que podría ser la image en sí, pero todavía vi el error. Volví a jpg para ver consideraciones de tamaño de file.

¿Cómo resuelvo este problema? ¿Es un problema de iOS o algo así en mi código?

El sitio en cuestión es http://www.lfrieling.com/ . Solo veo esto en mi iPad Mini con iOS 6.1.3 (el más reciente al momento de escribir esto). No veo esto en mi iPhone con la misma versión de iOS. También ves esto en páginas largas más que otras páginas. Ver Profesional> Recursos.

¿Has probado la aceleración de hardware? Agregue -webkit-transform: translateZ(0); a la misma CSS que agrega el background. Esta es mi suposition porque parece ser un problema de renderizado y la aceleración del hardware corrige los problemas de representación cuando se usan las transiciones css en Chrome.

 #wrap { margin:0 auto; position:relative; padding:0; background: #B3B1B2 url(http://iosberry.combgs/parchment2.jpg); -webkit-transform: translateZ(0); } 

O tal vez intente retina imágenes de visualización para dispositivos que las admiten mediante consultas de medios?

 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #wrap { background: #B3B1B2 url(http://iosberry.combgs/parchment2_2x.jpg); } } 

Media Query source *

Para resolver los problemas de representación, puede intentar agregar -webkit-transform: translateZ(0); a otras tags que también envuelven contenido en la página. Esto puede evitar problemas de carga / representación.

Lynda En primer lugar, este es un buen website. En segundo lugar, debe tener en count estos dos consejos:

  1. La regla @media

    y escriba las reglas de un file CSS para cada dispositivo (aquí hay una list de medias )

  2. Pruebe su website en cualquier tamaño de pantalla, incluidos equipos de sobretable, tabletas, televisores y teléfonos mobilees.

Eso es todo, creo que te he ayudado.

Intente agregar -webkit-background-size a la label del cuerpo:

 body { -webkit-background-size: 512px 512px; } 

Prueba esto, esto puede ayudarte. Agregar overflow: hidden; height: 1%; overflow: hidden; height: 1%; a tu #wrap .

¿Has probado el background: #B3B1B2 url(http://iosberry.combgs/parchment2.jpg) repeat; . No estoy seguro de que va a resolver el problema, y ​​no tengo un iPad para probarlo, pero vale la pena intentarlo.

Intente si esto puede ayudar,

después de agregar repeat a #wrap ,

y agregar overflow:auto; a la .height

ya que el tamaño de la image es 512×512 y la altura es 2000.

violín actualizado

No estoy seguro de que esto funcione, pero el problema es que al hacer que la image interna no sea capaz de representar el background correctamente,

FYI: -webkit-transform: usa gpu, por lo que si el dispositivo no está habilitado con gpu entonces también te enfrentarás a un problema …

Espero que esto lo haga …