2013-08-23 24 views
8

Đây là lỗi lạ nhất mà tôi từng gặp với Chrome, rất tiếc tôi không thể hiển thị cho bạn hình ảnh ví dụ vì giới hạn pháp lý nhưng tôi ' sẽ cố gắng giải thích nó càng tốt càng tốt.Chrome: Có vị trí video HTML5: cố định hoặc tuyệt đối khiến tất cả ảnh nền đính kèm: cố định để ngắt

Vì vậy, tôi đang xây dựng trang web này có cuộn vô hạn qua các phần có kích thước của chế độ xem. Trong phần đầu tiên, tôi có một biểu mẫu và một video html5 với vị trí cố định trong nền và sau đó là hình nền đơn giản cho các phần tiếp theo, các phần được đánh số lẻ với background-attachment: fixed; mang lại hiệu ứng thị sai. Bây giờ điều rất kỳ lạ là: ngay sau khi tôi đã tập trung vào một trong các hình thức đầu vào trong phần đầu tiên, tất cả các phần với background-attachment: fixed; mất hình nền của nó ... nó vẫn còn trong quy tắc CSS nhưng không nhận được kết xuất (chỉ màu trắng).

Tôi đã thử một số giải pháp cho các sự cố tương tự như this SO thread hoặc this post. Bây giờ điều hài hước nhất với điều thứ hai là nếu tôi thêm -webkit-transform hoặc -scale vào các phần có hình ảnh bg cố định, sự cố xảy ra ngay lập tức mà không cần tập trung ... Tôi thực sự không thể tìm ra điều này.

Tôi hy vọng một người nào đó có thể giúp tôi giải quyết vấn đề này vì điều quan trọng là phải có hành vi giống như hành vi đó.

Dưới đây là jsfiddle hiển thị vấn đề, không chính xác như trên trang của tôi nhưng bạn có thể thấy lỗi, video đó được hiển thị thay vì hình ảnh, nhưng trên trang của tôi, tôi đặt video thành vị trí tuyệt đối sau khi cuộn phần thứ hai, vì vậy nó chỉ là màu trắng ...

+4

Bạn có thể tạo một câu đố với dữ liệu giả không? –

+0

Thật không may nó sẽ mất quá nhiều thời gian để tái tạo lại môi trường của tôi trên jsfiddle. Nhưng tôi đã chỉ ra rằng nó rõ ràng là video html5 gây 'background-attachment: fixed;' để ngắt. – Simon

+0

Và điều đó xảy ra nếu video hoặc trình bao bọc của nó có vị trí cố định hoặc tuyệt đối ... – Simon

Trả lời

0

Tôi cũng đã gặp sự cố này.

Điều là vị trí nền sẽ làm cho nội dung được cố định tại vị trí đó dựa trên cửa sổ trình duyệt.

Để có hiệu ứng thị sai, hãy thử với một số plugin

+0

Vâng, chúng tôi đã sử dụng plugin cho điều đó;) – Simon

Các vấn đề liên quan