Google Chrome đáng kinh ngạc Render

Question

Bạn có thấy hình chữ nhật bên trong div màu xanh dương không? Nó không có ý nghĩa với tôi rằng Google Chrome làm cho hình chữ nhật này. Trang chỉ có một div với lớp "sidebar" và css chỉ là:

.sidebar{ 
    background-color:#3756a0; 
    width:400px; 
    position:fixed; 
    top:0; 
    bottom:0; 
    left:0; 
    color:#fff; 
} 

Tôi đã xóa tất cả các tiện ích trong Google Chrome, tôi đã khởi động lại máy tính của mình. Chỉ có tôi trải qua việc render này. Tôi không chắc chắn cách khắc phục hành vi này. Bất kỳ giúp đỡ?

Chỉnh sửa: Tôi đang sử dụng MacOS Sierra v 10.12 và Phiên bản Chrome 53.0.2785.143 (64 bit) có vẻ là bản cập nhật cuối cùng có thể. Vấn đề cũng xuất hiện đối với tôi ở đây: steemconnect.com xem prntscr.com/crgo04. Nó có vẻ không dễ tái tạo.

Answer 1

Câu hỏi này sẽ có tất cả các bức ảnh trong bóng tối tôi nghĩ nhưng đây là một số điều bạn có thể thử:

1. Đặt * { all:initial; } đặt lại tất cả đạo cụ phong cách để ban đầu.
2. Hiển thị chuyển đổi từ inline thành inline-block thành block trên div/body.
3. Sự cố có xảy ra trong Firefox không? Safari?
4. Cài đặt Chrome Canary và xem điều đó có xảy ra ở đó hay không.
5. Hãy thử đi vào ngăn kéo chrome devtools và vô hiệu hóa mô phỏng và các tùy chọn khác như được hiển thị here.

Answer 2

Đã xảy ra sự cố tương tự vài ngày trước. Một người trong nhóm của tôi sẽ thấy các hiện vật tương tự khi anh ấy xem trang web chúng tôi phát triển từ Chrome chạy trên Sierra Macbook của mình, trong khi những người còn lại chưa nâng cấp hoặc không sử dụng macOS thì không gặp vấn đề này.

Vì vậy, đây có thể là lỗi của Chrome đang chạy trên phiên bản hệ điều hành này và cuối cùng nó sẽ được sắp xếp.

Đồng thời xem câu hỏi this.

Answer 3

Tôi đã gặp sự cố tương tự. Hiệu chỉnh màu sắc trong OSX đã giúp ích.

Tùy chọn -> Màn hình -> Màu sắc