Incredible Google Chrome Render

Question

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.

Answer 1

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

1. Set * { all:initial; } to reset all style props to initial.
2. Switch display from inline to inline-block to block on the div / body.
3. Does the issue happen in Firefox? Safari?
4. Install Chrome Canary and see if it happens there.
5. Try going into the chrome devtools drawers and disable emulation and other options as shown here.