Can't fix <xf:button fa=...> element is offset by one pixel

M

marquisite

Well-known member
Affected version
2.1 RC2
Comparing <xf:button> with the new XF2.1 fa="" attribute and the legacy icon="" attribute (or no icon at all), the fa="" button ends up misaligned vertically by one pixel.

193876

In the example above:
  1. Test 1 is <xf:button> <xf:fa icon="fa-copy"> Text...
  2. Test 2 is <xf:button fa="fa-copy"> Text...
  3. Test 3 is <xf:button icon="copy"> Text...
  4. Test 4 is <xf:button> Text...
This occurs in the two browsers I tested, Google Chrome and Mozilla Firefox.
 
We've identified a change that works for Chrome so we've added that. Annoyingly, FF and Edge don't seem to be affected by the fix, though they also seem to manifest slightly differently -- the fa button version is just one pixel taller, rather than shifted down by one. Annoyingly, looking at the FF inspector, it's actually telling me all of the buttons are the same height, but they're clearly not rendering identically.

I'm going to leave this open for now to see if we can come up with a better overall fix in the future.
 
Another annoying thing about this is that it only affects Windows Firefox (and Edge) -- I can't reproduce any issues back to any Firefox version with or without our workaround in Chrome.
 
Back
Top Bottom