Incredible Google Chrome Render

Do you see the rectangle inside the blue div? It make no sense for me that Google Chrome render this rectangle. The page is only having a div with the class "sidebar" and the css is only this:

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

I removed all extensions in Google Chrome, I've restarted my computer. Only me experiencing this render. I'm not sure how to fix this behavior. Any help?

Edit: I'm using MacOS Sierra v 10.12 and Chrome Version 53.0.2785.143 (64-bit) seem to be the last update possible. The problem appear also for me here: steemconnect.com see prntscr.com/crgo04 . It seem to be not easy to reproduce.

---

This question is going to have all shots in the dark I think but here are some things you could try:

Set * { all:initial; } * { all:initial; } to reset all style props to initial.

Switch display from inline to inline-block to block on the div / body.

Does the issue happen in Firefox? Safari?

Install Chrome Canary and see if it happens there.

Try going into the chrome devtools drawers and disable emulation and other options as shown here.

---

Had a similar problem a few days back. One guy from my team would see similar artifacts when he viewed the website we developed from Chrome running on his Sierra Macbook, while the rest of us who either had not upgraded or did not use macOS did not have this issue.

So, this is probably a bug of Chrome running on this version of the OS and it will get sorted eventually.

Also see this question.

---

I've had same problem. Calibration of colors in OSX helped out.

Preferences -> Monitors -> Colors

链接地址: http://www.djcxy.com/p/93568.html

上一篇: 'operator ='对于std :: string是不明确的

下一篇: 令人难以置信的谷歌Chrome渲染