Been running a screenshot pipeline for visual regression testing and hit something annoying — the same page renders slightly differently depending on the host OS. CentOS 7 vs Ubuntu 22.04 vs Alpine in Docker all produce different pixel outputs for identical URLs with identical Chrome versions.
The culprit is mostly font rendering. FreeType versions differ, fontconfig has different defaults, and some distros ship with subpixel antialiasing enabled while others don't. The result is text that's a pixel or two off, which is enough to trigger visual diff alerts on every single run.
Things I've tried:
- Pinning the Chrome version — helps with browser-level rendering but doesn't fix OS-level font differences
- Using
--font-render-hinting=none — reduces cross-platform variance significantly but text looks slightly worse
- Installing identical font packages everywhere — tedious but necessary.
fonts-liberation + fonts-noto covers most cases
- Running everything in the same Docker image — the nuclear option, but it works. If every environment uses the same base image, font rendering is identical
The Docker approach is what I settled on. Built a custom image with Chrome, all the fonts I need, and locked the FreeType version. Screenshots are now consistent across dev machines, CI, and production.
Curious if anyone else has run into this and found a cleaner solution. The font rendering inconsistency feels like something that should have a standard fix by now but apparently doesn't.
Side benefit of fixing this: once your baselines are stable, visual regression testing actually becomes useful instead of a noise generator.