background-attachment: fixed Không làm việc - Android Chrome (V40)

Question

nền

(Điều này đã được askedbefore, many times, tôi biết Tuy nhiên, nó dường như đã được gây ra bởi những thứ khác nhau mỗi lần tôi có.. đã trải qua khoảng bốn chủ đề trả lời StackOverflow khác nhau và đã thử mọi thứ. Không có gì có vẻ là đang hoạt động nữa, vì vậy tôi tin rằng đây là một vấn đề mới.)

Dù sao, tôi có một phần nền HMTL cần phải sửa , sử dụng background-attachment:fixed;

• Tất cả các trình duyệt máy tính để bàn - Làm việc
• Mobile Firefox - Làm việc
• Mặc định Android/Samsung trình duyệt - Làm việc
• Mobile Chrome - không hoạt động

Tôi đã quay các vấn đề vào một thử nghiệm có thể sao chép đơn giản hơn, là một phần tử section duy nhất, được đặt thành 200% chiều cao của trang, với nền ở chế độ toàn màn hình và cố định.

---

Mã

html,body { 
 
    padding:0; 
 
    margin:0; 
 
    height:100%; 
 
    width:100%; 
 
} 
 
section { 
 
    background-position:center center; 
 
    background-attachment:fixed; 
 
    background-size:cover; 
 
    background-image:url(http://www.andymercer.net/wp-content/themes/andymercer/images/background/home.png); 
 
    height:200%; 
 
    width:100%; 
 
}

<section>Test</section>

---

JSFiddle Để kiểm tra

Để thử nghiệm dễ dàng hơn trên điện thoại thông minh của bạn hơn là một đoạn mã: http://jsfiddle.net/LerLz1L2/

---

Những điều tôi đã thử

• backface-visibility: hidden;
• -webkit-backface-visibility:inherit;
• -webkit-transform: translate3d(0,0,0);
• yếu tố Setting và tất cả các bậc cha mẹ position:static

Answer 1

này làm việc cho hầu hết tất cả các trình duyệt trừ android mẹ đẻ trình duyệt

background-image:url(http://www.andymercer.net/wp-content/themes/andymercer/images/background/home.png); 
background-repeat: no-repeat; 
background-position: center center; 
background-attachment: fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover !important; 
max-width:100%; 
max-height:100%; 
width:auto; 

Nó được đánh giá cao được đề nghị để thiết lập url hình ảnh đầu tiên

Tìm kiếm một giải pháp cho các lỗi (background-attachment: fixed) trên trình duyệt Android.

Hy vọng sẽ giúp bạn!

Answer 2

Mã bên dưới hoạt động tốt cho tôi trong chrome android.

html { 
 
     height:100%; 
 
     background: url(bg.jpg) no-repeat center center fixed; 
 
     -webkit-background-size: cover; 
 
     -moz-background-size: cover; 
 
     -o-background-size: cover; 
 
     background-size: cover; 
 
    }

Tôi nhận này từ here

Answer 3

Đã vấn đề lớn với điều này - đó là một vấn đề lặp đi lặp lại trong android (có niên đại từ ver 4.0.0 ít nhất), mà vẫn chưa hoàn toàn cố định. Báo cáo lỗi tại đây: https://issuetracker.google.com/issues/36908439

Máy thử nghiệm android của tôi chạy chrome 60 trên Android 7.0.0 - vẫn chưa được khắc phục hoàn toàn. Hình nền trên cùng hoặc căn giữa dường như hoạt động tốt, nhưng căn chỉnh phía dưới và phía dưới bên phải nói riêng là một cơn ác mộng trong Android.

workaround tốt nhất mà tôi đã tìm thấy, là đặt hình nền cố định của bạn thành một div chuyên dụng riêng biệt, như trái ngược với nền trình duyệt riêng của mình ... (

Đặt div của bạn đến 100% của Hight viewport và chiều rộng , cho nó một vị trí cố định và một chỉ số z -10, sau đó đặt tất cả phong cách nền của bạn trong div đó thay vào đó, để trống nền trình duyệt. hầu hết các cách giải quyết khác mà tôi đã tìm thấy sẽ tạo ra sự cuộn lộn xộn trong các trình duyệt IE cũ.

Tất cả kiểu dáng nền hình ảnh mong muốn hoạt động hoàn hảo khi được đặt trong div chuyên dụng. Chỉ khi đặt chúng trên nền trình duyệt, mọi thứ trở nên tồi tệ.

Hy vọng điều này sẽ hữu ích.