search

Galooshi / happo

Visual diffing in CI for user interfaces
504 stars 16 forks source link

Snapshots incorrectly cropped when subpixel positioning used #151

Closed trotzig closed 8 years ago

trotzig commented 8 years ago

At Brigade, we have a few happo components that have a subpixel position from the top. This is unintentional, and I'm fixing that. Here's an example snapshot:

-picture- fallbacktext small_extra_large_current

When I render that example in Firefox, I get this bounding rectangle:

> happo.getFullRect();
Object { bottom: 25.466659545898438, left: 0, right: 25, top: 0.4666595458984375, width: 25, height: 25 }

When we pass back the rectangle bounds to the Ruby code, we round the numbers:

> happo.processExample(happo.defined['<ProfilePicture> small']);
Object { description: "<ProfilePicture> small", width: 25, height: 25, top: 0, left: 0 }

Notice how the subpixel positioning is no longer represented. This means that the snapshot in the above example is cut off too soon.

trotzig commented 8 years ago

Our internal problem (causing the subpixel positioning) was that we have the <body> set to display: inline-block. By setting vertical-align: top we avoid subpixeling. Git history tells me we do this to fix modal scrolling on mobile (@janpaul123 do you remember? 😄).

lencioni commented 8 years ago

I think we need to round the values before calculating width/height.