Tại sao CSS này không hoạt động cho Chrome trên Android nhưng hoạt động ở mọi nơi khác?

Question

Điều này thực sự là câu đố của tôi. Tôi muốn có pic.jpg được tĩnh trong nền (không di chuyển khi di chuyển) và nó sẽ không căng ra.

Nó hoạt động trên mọi trình duyệt (tức là Chrome, Safari, Firefox) trừ Chrome trên Android (thậm chí nó hoạt động trên trình duyệt gốc Android)

body{ 
     background-color: transparent !important; 
     background-image: url(<%= asset_path "pic.jpg" %>); 

     background-position: center center; 
     background-repeat: no-repeat; 
     background-attachment: fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 

Chrome dành cho Android làm cho nó như pic.jpg là lưng chừng ở màn hình, không nằm trên toàn bộ trang và không ở chế độ tĩnh khi cuộn ..

Tôi không thể tạo lại trên jsfiddle, tôi cũng cố gắng gỡ lỗi bằng điện thoại Android của mình và không có gì có ích.

Đây không phải là cách tạo hình nền?

Answer 1

Tôi không muốn trở thành độc ác nhưng vấn đề này đã được báo cáo khoảng 4 năm trước

http://code.google.com/p/android/issues/detail?id=3301

phản ứng gần đây nhất có thể giúp tôi đoán:

Trong các thí nghiệm của tôi với Android, tôi nhận thấy rằng tất cả các DIV khác trong cơ thể hoạt động chính xác, bao gồm định tâm, vì vậy tôi đã chuyển hình ảnh sang một DIV khác và nó hoạt động.

Hài hước.

tốt nhất

Answer 2

Tôi đã tìm thấy một workaround mà làm cho màn hình hiển thị nền một cách chính xác trên Chrome dành cho Android: xác định nền trong thẻ html, không phải là cơ thể. Đây là css mới:

html{ 
    background-color: transparent !important; 
    background-image: url(<%= asset_path "pic.jpg" %>); 

    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

And yes, this is valid markup. Theo kinh nghiệm của tôi, nền vẫn hoạt động chính xác trong mọi trình duyệt khác.

Answer 3

Tôi có vấn đề tương tự .. và tôi sửa chữa nó với điều này

html{ 
height:100%; 
min-height:100%; 
} 
body{ 
min-height:100%; 
}