(Realmente) Imagen de fondo larga no se procesa en iPad Safari

Por alguna razón desconocida, iPad Safari no muestra una imagen de fondo realmente larga. En mi ejemplo , la imagen de fondo es de 1,000 x 10,000 píxeles. El mismo ejemplo funciona en cualquier navegador de escritorio, por ejemplo, Safari, Firefox, etc.

Conozco el background-repeat en CSS pero desafortunadamente no es aplicable en mi caso específico.

Mobile Safari tiene límites para el tamaño de las imágenes de fondo que se mostrarán antes del submuestreo. Es posible que este problema le esté afectando debido al tamaño de su fondo:

El tamaño máximo para las imágenes GIF, PNG y TIFF descodificadas es de 3 megapíxeles para dispositivos con menos de 256 MB de RAM y 5 megapíxeles para dispositivos con una RAM mayor o igual a 256 MB.

Es decir, asegúrese de que width * height ≤ 3 * 1024 * 1024 para dispositivos con menos de 256 MB de RAM. Tenga en cuenta que el tamaño descodificado es mucho mayor que el tamaño codificado de una imagen.

ver: conocer los límites de recursos de iOS

Puede lograr esto usando múltiples imágenes de fondo. Rebane su jpeg largo en trozos manejables que se ajusten al límite, y luego use la magia css3 para fusionarlos en un solo fondo.

Por ejemplo, corté una imagen de 7400 px de alta en fragmentos de 2048 px y los coloqué de nuevo junto con esto:

 background-image: url('../images/bg_ipad1.jpg'), url('../images/bg_ipad2.jpg'), url('../images/bg_ipad3.jpg'), url('../images/bg_ipad4.jpg'); background-position: center 0px, center 2048px, center 4096px, center 6144px; background-size: auto auto; background-repeat: no-repeat; 

Esto se carga en el iPad a máxima resolución.