Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

We’ve been hearing about white diagonal lines showing up on CodePen for folks using Chrome on Windows. Here’s an example of what they see:

We did a little digging and found out that it’s related to a conflict between some video cards and Chrome on Windows. Not everybody who uses Chrome on Windows will see it, but it sure sounds like a lot of people are.

Here’s a suggested fix from the Chrome Help Forum:

1) Type chrome://flags in URL bar

2) Locate the following entry “Composited render layer borders”

3) Make sure it is set to “Enable”

4) Restart your browser and then check!!

If this doesn’t help try this:-

in chrome flags set GPU rasterization MSAA sample count to 0

This is one of those things that’s super frustrating for us, because we know it’s bothering our members, and we know why it’s happening, but we can’t fix it.
It’s probably no picnic for the Chrome team, either!

But, we’re glad there’s a workaround. If you’re seeing those strange white lines, that little tweak should help make them disappear.