Alternating line fill behind reference examples is slightly off

[stalgiag]

Actual Behaviour

The gray and white alternating lines behind reference examples is slightly off. This seems to build up with consecutive lines.

Expected Behaviour

The gray and white lines alternate with the same height as the text in the example code.

Steps to reproduce it

It can be seen easiest for me in a long example such as the one for createShader.

I am running Chrome 74.0.3729.169 on Windows 10. I have a 4k screen so this could be related to pixel density. Though I tried using the chrome mobile design tool to try other things out to see if this changed and it was not.

Screenshots of the issue

Would you like to work on the issue?

I can but it would be a long time before I was able to get to it. If someone has time to do it sooner that would be preferable to waiting until I finish the other tasks on my plate. I just wanted to document it, and I didn't see an existing issue.

[limzykenneth]

This doesn't show up on my side. macOS 10.14.4, Firefox 66.0.4, Chrome 74.0.3729.157, Safari 12.1

As you mentioned very possibly a pixel density issue or even a OS/browser issue.

[stalgiag]

I tried on another Windows 10 computer that has a 1080p display and still see the lines displaying as they do in the screenshot above in the same version of Chrome.

Those same lines display correctly in Firefox 66.0.5 and Edge 42.17134.1.0 on both computers.

So my guess is that it isn't the pixel density. It might be as simple as the 'line-height' css value or maybe the font metrics in the font being used in the code. I am a novice in this area so this is just speculation based on a quick search. Either way it is a minor problem that impacts a small subset of users. Though it seems probable that those alternating colors help low-vision people see the code more easily so I thought it worth documenting.

[lmccart]

thanks @stalgiag I think I can track this one down. I seem to recall that the line spacing for text in the editor and the row colors are actually two different elements with their own css. I'll see what I can find.