Por alguna razón desconocida, iPad Safari no muestra una imagen de fondo realmente larga. En my example, la imagen de fondo es de 1,000 x 10,000 píxeles. El mismo ejemplo funciona en cualquier navegador de escritorio, p. Safari, Firefox, etc.(Realmente) Imagen de fondo largo no se procesa en el iPad Safari
Conozco el background-repeat en CSS pero desafortunadamente no es aplicable en mi caso específico.
Mobile Safari tiene límites a lo que el tamaño de las imágenes de fondo se mostrará antes de submuestreo, se le puede ser golpeado por este problema debido al tamaño de su fondo:
El tamaño máximo de los GIF decodificada, PNG, y las imágenes TIFF son 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 el ancho * alto ≤ 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.
véase: Know iOS Resource Limits
Esto se puede conseguir mediante el uso de 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 alta imagen 7400px en trozos de 2.048 píxeles y la posición de nuevo juntos 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 carga en el IPAD a la máxima resolución.
Vaya buena llamada, usar múltiples imágenes de fondo es muy inteligente. –
¿Podría describir cómo background-repeat: no es aplicable para usted? ¿O es porque la imagen que desea usar fuera de su URL de ejemplo no es repetible? – Luke
En teoría, el ejemplo ciertamente puede usar 'background-repeat'. Sin embargo, es solo para mostrar que la imagen de fondo no se muestra cuando la visualizaste en Safari (iPad). – moey
pjumble lo tiene todo en cuenta :) – Luke