Does a Better Screen Give Your Website More Flaws?
Have you ever switched to a better phone, or plugged into a nicer monitor, and started noticing things you never saw before? Like jagged edges on an app icon, or an old photo you saved ages ago suddenly looking kind of blurry.
You might have wondered, am I just getting too picky? Or is something wrong with this screen?
Actually, neither. It's because your screen got better. Retina, resolution, pixel density, all those words that sound so abstract in product keynotes suddenly become very real in moments like these!
The Same Effect Looks Different on Different Screens
I ran into this while working on the shader scene for my portfolio. It's a blob of light computed in real time, and the glow shifts around as you move your mouse.
The exact same effect looked wildly different running on Windows versus Mac, and strangely enough, it looked much softer and nicer on Windows. At first I assumed it was a performance issue, but it turned out neither machine was anywhere near its limit. Both had plenty of headroom.
After a lot of back and forth testing, I finally figured out it came down to the density of the screen's light dots, that is, how many physical glowing points are packed into the same patch of screen. The flaws and harsh sharp edges had been there the whole time. The Windows screen was simply smoothing them over and never showing them.
It Happens in Real Life Too
Some everyday situations work exactly the same way. Like when you always thought that sign in the distance said a certain thing, and then you got glasses and discovered there's a typo on it. Or the same low-resolution photo that looks perfectly fine on an old TV, but on a high-definition LCD screen, the pixelated mosaic is impossible to miss.
The Long Detour to the Real Problem
The shader I wrote renders the light blob as a small image first, then scales it up to fill the screen. That makes rendering much faster, but that's exactly where the problem was. The Mac's screen is finer, so for a grid cell of the same size in the scaled-up blob, it uses about 6.7 physical light dots to draw it. The Windows screen only uses about 3.3. So the Windows screen's own coarseness happened to blur the cell boundaries away, while the Mac was fine enough to draw those boundaries crisp and clear.
My first move was to adjust the resolution so the Mac wouldn't render things so sharply. And the Mac did get softer, but on Windows the motion started to look choppy and the edges turned jagged, because I was tuning the wrong thing entirely. Resolution is the sampling rate, while softness lives in the content of the signal itself. Trading one for the other just produced fake patterns and stuttery jagged edges on the Windows screen. To fix the jaggies I turned the resolution back up, and then the softness on the Mac disappeared again. I kept skipping around inside this death loop, never finding the right way out.
Eventually I realized the right direction was to draw the light blob itself in finer detail. Fine enough that no matter which display you look at, the scaled-up details stay the same, regardless of how densely the screen packs its light dots.
Takeaway
This experience taught me to understand the cause first, so I know which fixes were never going to work in the first place. When I saw the image was too sharp, my gut reaction was to lower the resolution, and it took me a long detour to realize that road was a dead end from the start. What actually needed adjusting was the fineness of the light blob itself. A messy but really fun lesson to learn!
PS: The Mac and Windows screens above don't represent every Mac and Windows display out there. It just happens that my machines on these two systems show things differently, so I'm using Mac and Windows as shorthand. Also, you might have noticed that the background lines look brighter in some of the clips than in others. As for why that happens... well, that's a whole other story.