(Thực sự) Hình nền dài không hiển thị trên iPad Safari

Question

Vì một số lý do không xác định, iPad Safari không hiển thị hình nền thực sự dài. Trong my example, hình nền là 1.000 x 10.000 pixel. Ví dụ tương tự hoạt động trên bất kỳ trình duyệt dành cho máy tính để bàn nào, ví dụ: Safari, Firefox, v.v.

Tôi biết về số background-repeat trong CSS nhưng tiếc là không áp dụng được trong trường hợp cụ thể của tôi.

Answer 1

Mobile Safari có giới hạn cho những gì kích thước ảnh nền nó sẽ hiển thị trước khi mẫu phụ, bạn có thể bị ảnh hưởng bởi vấn đề này vì kích thước của nền của bạn:

Kích thước tối đa cho GIF được giải mã, PNG, và hình ảnh TIFF là 3 megapixel cho các thiết bị có RAM dưới 256 MB và 5 megapixel cho các thiết bị có RAM lớn hơn hoặc bằng 256 MB.

Tức là, đảm bảo chiều rộng * chiều cao ≤ 3 * 1024 * 1024 cho các thiết bị có RAM dưới 256 MB. Lưu ý rằng kích thước đã giải mã lớn hơn rất nhiều so với kích thước được mã hóa của một hình ảnh.

see: Know iOS Resource Limits

Answer 2

Bạn có thể đạt được điều này bằng cách sử dụng nhiều hình ảnh nền. Cắt jpeg dài của bạn thành các phần có thể quản lý phù hợp với giới hạn, và sau đó sử dụng phép thuật css3 để hợp nhất tất cả chúng thành một nền duy nhất.

Ví dụ tôi thái lát lên một hình ảnh cao 7400px vào kích thước 2048px khối và đặt chúng trở lại với nhau với điều này:

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; 

tải này trên iPad ở độ phân giải đầy đủ.