Font rendering difference between OSX and Ubtunu - how to handle?
#361 opened on Dec 4, 2016
Description
Hello!
First off, thanks again for an amazing project here - having now used BackstopJS for a few weeks, it’s paid off in a big way and become an essential part of our workflow at Snapppt.
we develop on a Mac and use CircleCI for our continuous integration setup - on which we’re using a Ubuntu Trusty image. The reference screenshots are being recorded on a mac. Having successfully got Backstop running as part of our build on CI, the issue is that Backstop tests are failing due to a difference in font rendering. The text on Mac is rendering a little more bold, and a little shorter than it is on Ubuntu - which is causing the text itself to be picked up as different by Backstop, but more significantly, the slight height different is pushing other content down by a tiny amount and resulting in a larger mismatch.
Mac on left, Ubuntu in middle - with font rendering difference causing a diff in large parts of the image
So my question here is - assuming many will have a similar workflow to ours, what methods are you using to address the difference in font rendering between the two environments?
It seems there’s a few options. I thought I’d reach out to hear if anyone has already tackled this in a reliable manner. Some options I see include:
-
Modifying Ubuntu’s font rendering to match Mac OSX - Through either editing fontConfig files, or making use of the infinality project. Having spent a little time looking into this, I’ve had little luck thus far - and wonder if it’d even be possible to get close enough to Mac in order to pass a Backstop test.
-
Creating the Backstop reference screenshots in Ubuntu locally - This would likely be via a Docker container or perhaps a VirtualBox saved Ubtunty Trusty setup. This would make running with Backstop less convenient, and also means the Ubuntu view would be our reference - when we’d prefer Mac to be the definitive recorded view, given it’s both what the platform is developed on, and how it is viewed by the majority of our users.
-
Having our CI run on an OSX server - It appears CircleCI supports running builds on OSX machines which could very well do away with this issue altogether. The downside to us there would be that we lose the benefit of our other tests (E2E, unit tests, backend tests etc) running on a server closer to that of production (which are also on linux servers).
A pretty general question here - but I’d welcome any thoughts on how others are addressing the issue of the font rendering differences environments causing failures in Backstop tests.