Hình nền CSS Parallax Không gian trắng trong IE

Question

Tôi đang sử dụng phương pháp Keith Clark's CSS-only để tạo hiệu ứng thị sai hai lớp sao cho hình nền cuộn với tốc độ chậm hơn so với phần còn lại của nội dung của trang web. Chỉ cần được rõ ràng, hình ảnh bao gồm toàn bộ trang và nội dung nằm trên đầu trang của nó.

Trang web của tôi được chia thành hai phần chính div (và một vùng chứa div) - một cho hình nền và hình kia cho nội dung của trang. Dưới đây là mã tôi đang sử dụng cho các yếu tố khác nhau div.

.container { 
    height: 100%; 
    overflow-x: hidden; 
    overflow-y: auto; 
    perspective: 1px; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 

.background { 
    background-image: url(images/background.jpg); 
    background-size: cover; 
    position: absolute; 
    /* margin-bottom: -200em; 
    overflow: hidden; */ 
    height: 200em; 
    left: 0; 
    right: 0; 
    transform: translateZ(-2px) scale(3); 
} 

.page-content { 
    transform: translateZ(0); 
} 

Nếu không có sự margin-bottom và overflow thuộc tính gia tăng, các yếu tố nền div sẽ kết thúc có khoảng trắng dọc còn sót lại một khi nó đã được thiết lập lên một tầm cao đủ cao để trang trải tất cả các nội dung của trang.

Sau khi thêm biên độ tiêu cực, vấn đề đã được cố định trong Chrome và loại trong Firefox *, và tôi tăng chiều cao và lợi nhuận tiêu cực của các yếu tố div được nhiều hơn được yêu cầu để đảm bảo nó sẽ làm việc cho trang khác độ dài.

IE 11 vẫn có không gian màu trắng ở đó. Thông thường, thuộc tính background-size: cover; loại bỏ bất kỳ khoảng trắng nào, nhưng điều này không hoạt động với hiệu ứng thị sai.

Bạn có biết cách nào để xóa không gian trắng sẽ hoạt động cho IE9 + và các trình duyệt chính khác không, hoặc tôi có may mắn không?

Dưới đây là một JSFiddle có mã chính xác giống với trang web tôi đang tạo.

* Firefox không có khoảng trắng, nhưng lề âm không hoạt động đúng cho tất cả độ dài trang. Đối với các trang ngắn hơn, bạn có thể cuộn theo cách đã vượt qua phần cuối của nội dung của trang. Tôi có thể khắc phục điều này bằng cách thay đổi chiều cao và lề cho mỗi trang, nhưng một giải pháp toàn cầu sẽ được đánh giá cao nếu có thể.

Answer 1

Không có cách nào để có được CSS sai để làm việc trong IE, được nêu ra. Nhưng vì các trình duyệt dựa trên Webkit như Chrome và Opera (tôi chưa thử nghiệm Safari) hoạt động tốt với thị sai, có thể nhắm mục tiêu trình duyệt Webkit và hiển thị nền sai cho chúng và hiển thị mã khác - không có thị sai - cho các trình duyệt khác.

Trước tiên, tôi đặt mã sai bên @media truy vấn, như thế này:

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
    .container { 
    [rule contents] 
    } 

    .background { 
    [rule contents] 
    } 

    .page-content { 
    [rule contents] 
    } 
} 

Thuộc tính đầu tiên (-webkit-min-device-pixel-ratio:0) mục tiêu tất cả các trình duyệt Webkit-based, nhưng kể từ khi tôi giả định không phải tất cả các phiên bản của trình duyệt Webkit sẽ hỗ trợ thị sai này có hiệu lực, tôi cũng đã thêm thuộc tính thứ hai, giới hạn các trình duyệt thành Chrome 29+ and Opera 16+ (Tôi loại trừ Safari chỉ để an toàn, nhưng bạn có thể choose another hack nhắm mục tiêu Safari nếu bạn phát hiện ra nó hoạt động).

Có lẽ sẽ tốt hơn nếu bạn sử dụng feature detection, nhưng tôi chưa học JavaScript và trên đây là giải pháp chỉ CSS.

Sau khi đặt các quy tắc thị sai trong truy vấn @media, tôi thiết lập quy tắc mặc định thay thế cho phần tử div quay lại.

(Mặc dù phân chia các trang web vào mặt trước và sau div yếu tố là không cần thiết mà không sai, thiết lập các yếu tố div trở lại với một hình nền chứ không phải body hoặc html loại bỏ một tấn lag.)

Để giữ lại càng nhiều điểm giống với phiên bản thị sai càng tốt, tôi đặt hình nền thành position: fixed.

Vì các trình duyệt đọc qua các tập tin CSS từ trên xuống và áp dụng phong cách theo thứ tự đó, điều quan trọng là phải có thị sai .back quy tắc (và xung quanh @media truy vấn của nó) đến sau tiêu chuẩn, không sai .back quy tắc trong tập tin. Và dĩ nhiên, tôi đảm bảo rằng tất cả các thuộc tính áp dụng cho cả quy tắc chuẩn và sai quy tắc .back chỉ xuất hiện trong quy tắc mặc định để tiết kiệm dung lượng (chúng sẽ được các trình duyệt Webkit áp dụng cùng với các quy tắc bổ sung trong thị sai). phiên bản).

Answer 2

Tôi nghĩ bạn có một vài vấn đề nếu mục tiêu của bạn là thực hiện công việc này trên IE9. Điều này làm việc cho tôi, nhưng không phải mà không tăng chiều cao kích thước của .back div.

Điều này phù hợp với tôi trong IE9 và Chrome, nhưng bạn có thể chỉ muốn một số điều kiện của IE.

http://jsfiddle.net/Lawrg9mv/21/

bổ sung:

.back { 
    height: 80em; 
    -ms-transform: translateZ(-2px) scale(3); 
} 

.front { 
    -ms-transform: translateZ(0); 
    z-index: 10; 
    position: relative; 
}