Hiệu ứng thị sai CSS tinh khiết với nền video

Question

Tôi đang cố tạo hiệu ứng thị sai bằng CSS thuần túy cũng có nền video trên khung hình đầu tiên. Hiệu ứng hoạt động tốt trong Firefox và IE9 + nhưng Chrome có hiệu ứng rách trên tất cả các khung với "background-attachment: fixed".

Tôi đã cố gắng tìm câu trả lời ở đây trước khi sử dụng bố cục HTML lạ và cắt CSS nhưng tôi không thể tìm thấy nó nữa. Vấn đề với mã đó là tôi không thể đặt khung thành độ cao tối thiểu và cho phép nội dung dễ dàng chỉnh lại trên các chế độ xem nhỏ hơn.

Có rất nhiều câu hỏi tương tự ở đây nhưng không có câu hỏi nào trong số đó dường như thực sự được trả lời hoặc họ đang tham chiếu một lỗi cũ hơn dường như đã được khắc phục ngay bây giờ. Nếu tôi xóa video, thuộc tính tệp đính kèm nền sẽ hoạt động như mong đợi. Có lẽ những vấn đề này có liên quan?

dụ: http://codepen.io/cluke009/pen/cdHJu

HTML

<div id="slide0" class="slide"></div> 
<div id="slide1" class="slide"></div> 
<div id="slide2" class="slide"> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>.... 
</div> 
<div id="slide3" class="slide"> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>.... 
</div> 
<div id="slide4" class="slide"></div> 
<div id="slide5" class="slide"></div> 

CSS

body, 
html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
p{ 
    margin: 0; 
    padding: 10px 5%; 
} 
video { 
    z-index: -9999; 
    position: fixed; 
    right: 0; 
    bottom: 0; 
    width: auto; 
    height: auto; 
    min-height: 100%; 
    min-width: 100%; 
} 
.slide { 
    box-sizing: border-box; 
    height: auto; 
    min-height: 100%; 
    min-width: 100%; 
    background-size: cover; 
    box-shadow: inset 0 10px 10px rgba(0,0,0,.3); 
} 

.slide:nth-child(even) { 
    background-attachment: fixed; 
} 
#slide1{ 
    background-image:url(http://www.placekitten.com/1000/900); 
} 
#slide2{ 
    background-image:url(http://www.placekitten.com/600/400); 
} 
#slide3{ 
    background-image:url(http://www.placekitten.com/1000/1000); 
} 
#slide4{ 
    background-image:url(http://www.placekitten.com/1000/800); 
} 

Answer 1

Tôi nghĩ rằng hiệu ứng rách nghĩa là khoảng cách kỳ lạ từ khung với mèo và văn bản đến bóng cô đơn tiếp theo .

Câu hỏi có thể trùng lặp của bạn Chrome issue with background-attachment fixed and position fixed elements