Holy Uncanny Diagonal Lines, Batman!

June 9, 2017 9:15 AM

I'm getting a weird display artifact on the Modern Dark Theme. Apparently I'm not the only one, so let's compare notes and try to track this down!

I'm getting a weird display artifact on Modern Dark in Chrome (58.0.3029.110) on one specific computer (screenshot) -- any idea what might be going on? It persists even in incognito mode and with all extensions disabled (unchecked).

It's a vertically tiling diagonal light-grey single pixel line that seems to be part of the .content div. In a maximized window on my 1920x1280 screen it extends about 90% across the width of the screen; at any lower vertical size it extends fully across (so it seems to be impacted by css window size selectors).

I'm not observing this on other sites, in other browsers, or in Chrome (same version!) on other machines. I'd be convinced it was caused by extensions but since it persists in Incognito with extensions disabled, I'm very confused.

posted by Alterscape to Bugs at 9:15 AM (25 comments total)

Yeah, we've seen scattered reports of this from other users too and have not so far pinned down what's up, other than it seems to be pretty browser/environment specific.

So, anyone up on the deep voodoo, have at.
posted by cortex (staff) at 9:16 AM on June 9, 2017

Have you tried turning it hardware acceleration off (and on again)?
posted by zombieflanders at 9:18 AM on June 9, 2017 [2 favorites]

I was able to reproduce this issue on my PC, though the lines are broken up rather than continuous (screenshot). Chrome 59.0.3071.86, current Windows 10, NVIDIA graphics drivers 22.21.13.8205. I opened the developer tools and started fiddling, disabling individual styles. I found that there's a style element in the page header that sets background-color: #595959 for html,body,.content. If I disable just that background-color style in the style inspector, the lines disappear.

A web search turned up this Stack Overflow conversation about the bug. It seems to have something to do with either CSS animation or SVGs, but the SO folks were unable to nail down an exact cause.

That's all I've got. Good luck, this looks like a tricky one!
posted by skymt at 10:00 AM on June 9, 2017 [1 favorite]

Have you tried turning it hardware acceleration off (and on again)?

Not sure how I missed this comment before! Disabling hardware acceleration in Chrome settings does indeed banish the lines.
posted by skymt at 10:23 AM on June 9, 2017

Innnnnnteresting!
posted by cortex (staff) at 10:31 AM on June 9, 2017

Ha, yeah, IME those diagonal lines are a classic sign of something wonky on the GPU side. Did they start to show up with the 382.05 drivers? They're now the baseline for Nvidia drivers on Windows Update, which has made a lot of people quite unhappy (mostly for games, but also for some users running multi-monitor setups).
posted by zombieflanders at 10:34 AM on June 9, 2017

Interesting, I hadn't thought to check hardware acceleration. I'll test that when I get home & onto the device of mine which is experiencing this.
posted by CrystalDave at 11:12 AM on June 9, 2017

This wouldn't happen if you used the professional white background.

(sorry, not sorry)
posted by Jahaza at 12:54 PM on June 9, 2017 [5 favorites]

My glitch goes away when I disable hardware acceleration! Guess it's time for an nvidia driver downgrade.
posted by Alterscape at 1:52 PM on June 9, 2017 [1 favorite]

This was happening to me on my PC and I would be excited to have the problem identified, if it weren't for the fact that that PC got fried by a lightning strike two weeks ago. (I don't presently have the spare parts to swap enough stuff to isolate what broke.) But I got a laptop, which I paid far more for than I wanted because I want one that can handle gaming, so lately I've been nauseated whenever I think of how I've reduced my savings.

But no weird lines on the laptop. It's got a 1050 Ti and I'm running Win 10 and Chrome, so very similar, but not precisely the same specs as when I was seeing the lines.
posted by Ivan Fyodorovich at 2:15 PM on June 9, 2017

So according to a comment in /r/webdev, the problem is with an experimental anti-aliasing (specifically MSAA) function in Chrome, not HW acceleration itself. Try the following and see if it works:

1. Type chrome://flags in the address bar.
2. Look for the item labeled GPU rasterization MSAA sample count.
3. In the drop-down box, set it to 0.
4. A box should pop up at the bottom of the window asking if you want to relaunch Chrome, click on it.
5. [Optional] Shower me with praise so that I may bask in the glory of my works.

posted by zombieflanders at 3:14 PM on June 9, 2017 [22 favorites]

That solves it, zombieflanders, you genius web detective.

Interestingly, the Chromium bug report from February that was linked in that comment uses Metafilter as its test case. I don't see anything from that bug that suggests any possible workarounds for web developers, unfortunately.
posted by skymt at 3:37 PM on June 9, 2017

YES, finally the lines are gone !!! Thanks, zombieflanders. Strange thing is that the lines only appeared on Metafilter, not on any other websites.
posted by Pendragon at 12:20 AM on June 10, 2017

Reported by [e-mail], Feb 11
...
What is the expected result?
Site has a professional solid color blue background (see screenshot).

OK so that chrome dev is pretty clearly a fairly old mefite...
posted by russm at 3:34 AM on June 10, 2017 [20 favorites]

I don't know why I didn't start it, but I've been waiting for this thread to pop up, and THANK YOU.
posted by cobaltnine at 6:33 AM on June 10, 2017 [2 favorites]

Unrelated to the question at hand, how long was this one in the queue before going live? The title seems like a case of very poor timing. Kind of disheartening too, as I suspect that there's 0% chance that the mods would change it to something else.
posted by radwolf76 at 11:00 AM on June 10, 2017

It was in the queue for only a few minutes I think, and that was about 12 hours before Adam West (RIP) passed away and 24 hours before today's obit post about him. Just an unfortunate coincidence -- but also a testimony to how iconic and pervasive West's work has been.
posted by LobsterMitten (staff) at 11:06 AM on June 10, 2017 [8 favorites]

In a similar vein, I just watched Lego Batman last night finally, which had several little love letters to West's Batman '66 work littered throughout. It's hard to think of a more gently, genially pervasive figure and pop culture touchstone; huge bummer to hear about his passing this morning.
posted by cortex (staff) at 11:11 AM on June 10, 2017 [2 favorites]

Zombieflanders' fix worked for me... but I have questions. WHAT DO THESE WORDS MEAN, AND WHAT DID I JUST TURN OFF? (or set to 0 anyway)


GPU rasterization Mac, Windows, Linux, Chrome OS, Android
Use GPU to rasterize web content. Requires impl-side painting. #enable-gpu-rasterization

GPU rasterization MSAA sample count. Mac, Windows, Linux, Chrome OS, Android
Specify the number of MSAA samples for GPU rasterization. #gpu-rasterization-msaa-sample-count

posted by DigDoug at 2:11 PM on June 10, 2017

Now that they're gone, I kind of miss them.
posted by Apoch at 2:29 PM on June 10, 2017 [2 favorites]

DigDoug, I could be wrong, but it looks to me like you gave up your right to your firstborn child.
posted by Ivan Fyodorovich at 9:00 PM on June 10, 2017 [3 favorites]

Lots of generalizations, likely contains some errors.

Rasterization:
A web page is described using vectors, something like: draw a line that goes from here to there, and which curves just like so. Make the color professional blue.

A computer screen is made of discreet pixels, which can be one color each.

Rasterization consist of looking at all the vectors and figuring out what color to set each pixel on the screen to make a nice picture of what the vectors describe.

Image you draw a picture with crayons. This is the vectors. Then lay a mosquito screen on top of the drawing. Each hole in the mosquito screen is a pixel. Paint each square in the screen the color of the crayon under the square. You have rasterized it.

GPU rasterization:
Your computer has a main processor that is good for all kinds of stuff, and likely a graphics processing unit (GPU) that is not as versatile as the main processor, but very very good at maths related to putting pretty pictures on the screen.

GPU rasterization lets the GPU do all the rasterization, which the GPU is very good at, leaving the main processor free to do other stuff.

This should make web surfing a faster smoother experience.

Aliasing:
Pixels on the screen are arranged in columns and rows. For a perfectly horizontal or vertical white line on blue background you set all the pixels in the right row or column to white and you get a crisp line.

Now imagine a diagonal line. You lay your mosquito screen and have to decide whether each square should be white or blue. You may paint two holes in a row white, then go down one row and right one column and paint two more holes white. Repeat until the line ends.

You will end up with a jagged line.

Antialiasing:
To prevent the jagged line, you don't just paint the holes white or blue, you paint some squares light blue, some darker blue, some fully white.

From a distance the line will look smooth.

There are many ways to figure out the best color for each hole.

A simple way would be to paint holes that have only white crayon underneath complete white. Holes that have only blue completely blue. Holes that show both blue and white are painted light blue.

MSSA sampling count:
MSSA stands for multisample antialiasing. A method for antialiasing the whole screen.

Imagine you lay your mosquito screen on top of the drawing and figure out the color of each hole. Then you move the mosquito screen a tiny little bit, smaller than the size of a single hole, and figure out again what color to paint each hole. Repeat this many times, then combine the results and paint each pixel the resulting color.

The sampling count tells the computer how many times to move the screen before computing the final color.

Hope this helps.
posted by Dr. Curare at 12:14 AM on June 12, 2017 [12 favorites]

The lines also disapear when I change GPU rasterization MSAA sample count to 16.
posted by Pendragon at 12:31 AM on June 12, 2017 [1 favorite]

As the guy who posted this: I contacted the mods pretty early in the morning (West coast US time) and asked if they knew about this and had a fix. Cortex replied almost immediately and suggested I make a post since others had reported the issue. I copy-and-pasted my contact form question more or less verbaitam and tried to inject some levity with a silly title. I honestly can't remember if I was aware of West's passing yet but I really don't think so. I think the post was in the queue less than 30 minutes before it was posted, either way.

I came up with the title because Robin's "Holy [exact thing under discussion], Batman!" Construction from Adam West Batman is one of the snowclones that comes to my mind when trying to describe an undesirable thing in an amusing way. I had no idea about Adam West's death at the time and certainly meant no disrespect -- if anything I'd call it a tribute to the cultural impact of West's Batman. I am saddened by his passing too, and he definitely had an impact on me.

That said, if the community feels it would be more respectful to change the title and the mods are okay with that, I'm all for it. No desire to step on toes here!
posted by Alterscape at 9:23 AM on June 12, 2017 [2 favorites]

There's absolutely nothing wrong with the title, don't worry about it.
posted by cortex (staff) at 9:33 AM on June 12, 2017 [6 favorites]