CodingTrain/thecodingtrain.com

single pixel gap in nav dropdown

dipamsen opened this issue · 6 comments

lcgraves commented

Hi @dipamsen, I can't seem to reproduce the behaviour. I took screenshots in Safari and Chrome browsers and don't see the behaviour you observed.

Here's a screenshot in Safari browser:

Screenshot 2024-03-18 at 9 24 31 AM

And here's a screenshot in Chrome browser:

Screenshot 2024-03-18 at 9 30 26 AM
dipamsen commented

That's interesting, I see it in both Chrome and Firefox:

OS: Windows 11 23H2 64 bit

Firefox Version 123.0.1 (64-bit)
image

Chrome 122.0.6261.129 (Official Build) (64-bit)
image

shiffman commented

I can't reproduce it on a mac either! Not sure how to best approach this but open to suggestions, thanks for finding this @dipamsen!

fturmel commented

Same, can't reproduce on macOS (Chrome, Firefox and Safari) 🤷

(The menu font looks bad too! Mismatched height between characters...)

Would be interesting to know if all Windows users are experiencing this, or if it's just your setup.

Some thoughts and ideas to explore:

  1. Could it be linked to the pixel density of your display? We're most likely all on retina displays (over 200 PPI) on mac, which may be why we don't see the same thing as you.
  2. Are you scaling the display or text at the OS level? (accessibility features)
  3. Are you using your display's native resolution or are your slightly below/above? That could explain the subpixel/blurry stuff happening, and the gap could be related.
  4. GPU drivers?

In your original screenshot, the hairline borders at the bottom (which should be 1px solid) seem to misalign at the subpixel level and the red one is anti-aliasing (lighter at the bottom).

CleanShot 2024-03-21 at 12 50 25@2x

The baseline for the menu buttons is 50px on the site, so the actual pixel size on display should be a factor of 50. I don't know if you upscaled your later screenshots, but the butons seem to be at a height of ~120px. Makes me think my points 2 and/or 3 could be at play?

CleanShot 2024-03-21 at 13 54 32@2x

dipamsen commented

All my previous screenshots were taken after zooming in (magnification via touchpad on chrome, not sure what this feature exactly is called). Here are the same page screenshots without any zooming:

Home Page

Screenshot 2024-03-21 234709

Showcase Guide Page

image

Weirdly, in these images the menu height seems to be ~60px? I don't know if windows is doing some additional enhancement on the image after taking the screenshots.

Found the culprit: Apparently, on windows 11, the default scale is 125% with the resolution set to 1920x1080:

image

dipamsen commented

Changing back to 100% does fix all the issues:

image

Though it does make everything on my screen very tiny, so I'll go back to 125%, or change the screen resolution.

  • 😄1
  • 🎉1