2011-12-19 30 views
12

Dường như có hành vi kỳ quặc trong Chrome 15+ khi sử dụng kết hợp đặc tính CSS này, cụ thể là phần tử bên ngoài có khả năng hiển thị ẩn và cố định vị trí và phần tử bên trong hoàn toàn hoặc tương đối được ghi đè.Có lỗi trong hiển thị CSS của Chrome không?

<html> 
<head> 
<title></title> 
</head> 
<body> 
<div style="position:fixed;visibility:hidden;"> 
    <div style="position:absolute;visibility:visible;"> 
     <img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png" /> 
    </div> 
</div> 
<script type="text/javascript"> 
for(var i=0; i<100; i++) { 
    document.write("<br />"); 
} 
</script> 
</body> 
</html> 

Đoạn mã trên sẽ tạo ra hình ảnh này khi được cuộn. Chrome visibility issue

Thực tế là cả hai vị trí tương đối và tuyệt đối đều tái tạo hành vi có thể được viết lên thực tế là đối với vị trí tuyệt đối DOM cụ thể này tương đương với vị trí tương đối.

Trong trường hợp đánh dấu này hợp lệ và có hành vi được xác định, điều này trỏ đến lỗi trong trình duyệt/công cụ hiển thị và có vẻ như tối ưu hóa hiệu suất bị lỗi, đặc biệt là hành vi này đã được giới thiệu với Chrome 15 cập nhật.

JSFiddle link kê biếu không của Sparky672

Cập nhật:

Hành vi này đã được báo cáo cho WebKit Bugzilla và dường như rằng changeset đó giới thiệu các lỗi đã được xác định.

+0

Lỗi tồn tại trong 16.0.912.63 m, quá – danjah

+1

Tại sao không có jsFiddle? – Sparky

+0

Nó không xảy ra trong jsfiddle, nhưng tạo một trang web cơ bản, khởi chạy nó và bạn có thể thấy nó – danjah

Trả lời

33

Vâng, có một lỗi, chắc chắn: Tôi cũng đã quản lý bản sao đó trong phiên bản Chrome của mình.

Trong trường hợp bạn muốn khắc phục sự cố, bạn có thể thêm sửa lỗi "của webkit hasLayout", -webkit-transform: translateZ(0); vào trình bao bọc hoặc phần tử bên trong, điều này làm cho Chrome hiển thị chính xác khối.

Đây là một số fiddle cố định: http://jsfiddle.net/kizu/bHzWN/6/show/

+3

Nói với Paul Irish tại Google, người đồng ý với bạn và rằng đây là lỗi cần được báo cáo tại đây: http://goo.gl/AnJW5 – Rob

+1

Khắc phục tuyệt vời! Đây có vẻ là cách an toàn nhất để vượt qua lỗi mà không thay đổi quá nhiều. – Novikov

+0

Làm việc cho tôi - cảm ơn bạn rất, rất nhiều. lỗi "hasLayout" giống như trong WebKit 24.0.1312.56 m, vào năm 2013? * thở dài * – danjah

0

Vâng, đó là lỗi. Dường như đây là lỗi hồi quy bộ trang web bắt đầu xảy ra trong phiên bản 535 và đáng chú ý trong nhiều phiên bản của Chrome, thậm chí lên đến 18x

hack của kizu là một giải pháp thay thế cho đến khi họ xử lý lại.

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