(真的)长背景图像无法在iPad Safari上渲染

Question

由于某些未知原因,iPad Safari不会显示非常长的背景图像.在我的示例中,背景图像为1,000 x 10,000像素.相同的示例适用于任何桌面浏览器,例如Safari,Firefox等.

我知道background-repeatCSS中的内容,但不幸的是它不适用于我的具体情况.

Answer 1

移动Safari对子采样之前显示的背景图像大小有限制,由于背景的大小,您可能会受到此问题的影响:

对于RAM小于256 MB的设备,解码的GIF,PNG和TIFF图像的最大尺寸为3百万像素,对于RAM大于或等于256 MB的设备,最大尺寸为5百万像素.

也就是说,对于RAM小于256 MB的设备,请确保宽度*高度≤3*1024*1024.注意,解码的尺寸远大于图像的编码尺寸.

请参阅:了解iOS资源限制

Answer 2

您可以使用多个背景图像来实现此目的.将长jpeg切成符合限制的可管理块,然后使用css3 magic将它们合并到一个背景中.

例如,我将一个7400像素的高图像切成2048像素块并将它们放回原位:

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;

这将以全分辨率加载到iPad上.