Spurious diffs from elements with border-radius and a background image

[trotzig]

We have this component in our code base:

It often ends up having a diff in our happo run without having changed. Based on the diff it looks like there's some different anti-aliasing on the rounded borders at the top. See this diff: http://s3.amazonaws.com/diffux_ci-diffs/d871861a-667a-45a3-8286-f8f801f94f93/index.html#PEJhbGxvdEd1aWRlU2hhcmVDYXJkPnNtYWxs

My suspicion is that Firefox has slightly different anti-aliasing behavior when rounding an element with a background image that is loaded from cache versus loaded the first time.

[lencioni]

Is this a recent development or has it been happening for a while?

[trotzig]

This is a fairly new component, so I can't say for sure. Though I have a vague memory of seeing this in the past too. So probably not new.

On Wednesday, 14 September 2016, Joe Lencioni notifications@github.com wrote:

Is this a recent development or has it been happening for a while?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Galooshi/happo/issues/153#issuecomment-246905309, or mute the thread https://github.com/notifications/unsubscribe-auth/AAjS5b-4B1KxNWxI6iD_6uL18X7rw-sOks5qp3vcgaJpZM4J8ZI0 .

[lencioni]

What version of Firefox are you running? I've been using Travis, which defaults to 31.0esr. I was seeing a number of strange spurious diffs, then I recently updated Travis to use 47.0.1 and all of the spurious diffs seem to be resolved.

[trotzig]

If I'm reading our docker setup right, it's firefox-45.1.0-1.el7.centos. I'll talk to people to see if we can upgrade.

[trotzig]

Closing this issue. We have a workaround (using an inlined base64 image for the happo example).