Cuộn nền cơ thể cố định với trang trên iOS7

Question

Tôi đã sử dụng CSS sau để đánh dấu nền cơ thể cố định. Nó hoạt động tốt trên hầu hết các trình duyệt ngoại trừ iOS7 mới. Về sau nền không còn cố định nữa. Nó cuộn với trang. Bất kỳ ý tưởng làm thế nào để khắc phục vấn đề?

body 
{ 
background-color: #000; 
background-image: url('../pics/backgrounds/blackWhite.jpg'); 
background-repeat: no-repeat; 
background-position: center; 
background-attachment: fixed;  
webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;  
} 

CHEERS

Answer 1

tôi sẽ cố gắng và tìm thấy một số tài liệu tham khảo, nhưng trình duyệt di động buộc background: scroll vì sơn lại là quá đắt.

---

tham khảo:

CSS - Background images not displaying properly on mobile browsers

@PaulIrish cũng lưu ý này:

cố định hình nền có khổng lồ chi phí repaint và decimate di chuyển hiệu quả, đó là, Tôi tin, tại sao nó đã bị vô hiệu hóa.

Tuy nhiên, có nhiều cách để giải quyết vấn đề này nhưng không khắc phục nhanh. Hãy xem câu hỏi sau và nhận xét của nó.

Android/Mobile Webkit CSS Background-Attachment:Fixed Not Working?

Answer 2

tôi nhận thấy vấn đề background-attachment khi nâng cấp lên iOS7. Tôi đã phải sửa vấn đề bằng cách sử dụng Javascript như tôi không thể tìm ra một giải pháp với CSS một mình.

if (iosVersion >= 7) { 
    $(document).scroll(function() { 
     $('#background').css('background-position', '0px ' + $(document).scrollTop() + 'px'); 
    }); 
} 

Answer 3

Bạn cũng có thể sử dụng Backstretch jquery.

Nó không phải là nặng và hoạt động tốt trên iOS 7.

Answer 4

tôi sẽ khuyên bạn nên nhìn vào scrollr (https://github.com/Prinzhorn/skrollr). Đó là một thư viện thị sai cho phép bạn đạt được hiệu quả tương tự. Họ cũng đã cân nhắc kỹ các vấn đề với thiết bị di động:

Một số từ về lý do tại sao đây là cột mốc quan trọng và tại sao những người khác lại thất bại: Trình duyệt di động cố gắng tiết kiệm pin ở bất cứ đâu. Đó là lý do tại sao các trình duyệt di động trì hoãn việc thực thi JavaScript trong khi bạn đang di chuyển. iOS đặc biệt làm điều này rất tích cực và hoàn toàn dừng JavaScript. Tóm lại, đó là lý do tại sao nhiều thư viện cuộn không hoạt động trên các thiết bị di động hoặc chúng đi kèm với thanh cuộn của riêng chúng, đó là một cơn ác mộng khả dụng trên máy tính để bàn. Đó là một yêu cầu quan trọng trong khi tôi phát triển skrollr mà tôi không buộc bạn phải di chuyển theo cách tôi muốn. skrollr trên máy tính để bàn sử dụng thanh cuộn gốc và bạn có thể cuộn theo cách bạn muốn (bàn phím, chuột, v.v.).

Bạn vừa nói với tôi nó không hoạt động trên thiết bị di động, nhưng tại sao? Đáp án đơn giản. Khi sử dụng skrollr trên thiết bị di động, bạn không thực sự cuộn. Khi phát hiện trình duyệt trên điện thoại di động, skrollr sẽ vô hiệu hóa cuộn gốc và thay vào đó lắng nghe các sự kiện chạm và di chuyển nội dung (cụ thể hơn phần tử # skrollr-body) bằng cách sử dụng các biến đổi CSS.

Dưới đây là một ví dụ về việc thực hiện nền sai cổ điển: http://prinzhorn.github.io/skrollr/examples/classic.html

Nói trên trang ví dụ, một viên ngọc đáng chú ý:

thoái hóa mà không cần JavaScript (có thể vô hiệu hóa trên điện thoại di động mà không cần phá vỡ mọi thứ).

Answer 5

Tôi đã tìm kiếm và sử dụng kiến ​​thức cơ bản từ giải pháp Prinzhorn trên github. Cảm ơn, vì nó hoạt động hoàn hảo. Tôi chỉ có một hình nền được hiển thị trên mọi thiết bị, ngoại trừ iPad và bây giờ hình nền được đính kèm = cố định và kích thước hình nền: bìa.

Answer 6

Tôi đã có một giải pháp đơn giản cho điều này, sau khi đấu tranh với tất cả các phương pháp sửa lỗi này.

tôi gặp sự cố trên thiết bị iOS di động của mình.

css (desktop)

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap { 
background-size: auto; 
background-attachment: fixed; 
} 

.widget-wrap { 
background-attachment: scroll; 
} 

Sau đó, tôi ghi đè lên nó với phương tiện truyền thông truy vấn loại bỏ "cố định" như tập tin đính kèm nền.

css (di động)

@media (max-width: 767px) { 
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap { 

    background-attachment: initial; 

} 
} 

ban đầu - Bộ tài sản này để giá trị mặc định của nó. Tôi nghĩ rằng bởi vì IOS không chấp nhận 'cố định' nó rơi trở lại một giá trị mặc định nó chấp nhận, di chuyển.

Điều này làm việc cho tôi trên mọi thiết bị. Hy vọng nó cũng giúp người khác.