Graphic glitch in codepen Editor mode - Chrome only

Graphic glitch in codepen Editor mode - Chrome only
0

#1

This issue only happens to me from Chrome while in codepen’s Editor mode – regardless of which View I use and the size of the preview window. Whenever I change the background-color I’ll see diagonal, dotted, white lines running across the page preview. I see this in all but one of my pens (I tried copying that background color to another pen but the white lines persist).

Has anyone experienced something like this? If so, how did you fix it? I tried clearing cookies/cache etc but to no avail.

Here’s a pen that has these lines. When I’m looking at my other pens, only my Wikepedia Viewer doens’t have these lines running across the background.

Screenshot:


#2

Yeah, I am having the same issue. I do have a quick fix, though! Just create a div with the same background color, and cover the entire background with it, all while keeping the body css. Like this:

<div style="background-color: #5D6D7E; width: 100%; height:100%; position: absolute; z-index: -5"></div>

Hope this helps until the Chrome dev team patches things out.


#3

Actually, I found the actual source of the issue, who’s also a chrome user. Go to chrome://flags and change the GPU rasterization MSAA sample count to 0.


#4

I wasn’t having the issue as far back as April 30th when I finished the intermediate front end projects. But since yesterday, when I started on the advanced front end projects, I’ve noticed this issue. Did a recent Chrome update cause this?


#5

Yeah, it could be; I hadn’t seen it on any of the codepen projects that I have seen even weeks ago, and it popped up for me in the last week. Changing the sample count in chrome’s flags settings, noted in my last post, fixed it for me. Hopefully it will fix it for you as well!


#6

Totally fixed my problem, THANKS tetsunoken