Firefox whitespace oddity bug on <a> element

Question

I have included a link to a video describing this in depth but basically Firefox is adding left/right whitespace to the element making the perceived padding different than Chrome and IE. If I modify the value in Firebug and change back then the whitespace is gone and works as I expect in the first place. This is very frustrating, any ideas?

Please watch the video for an exact description.

Thanks

Update 1: Here is a test server you can inspect the code on, it may differ slightly from the video but the problem is still the same. test.audrey-oxenhorn.gotpantheon.com

Update 2: It appears to be the :first-letter pseudo element that FF has an issue with. I think this is an actual browser bug but am not sure how to resolve this right now.

Answer 1

Okay, I figured this out!

After trial and error trying to recreate this on JSfiddle I found that the :first-letter pseudo element was causing the issue. Then I did some searching and found that this is a known browser bug in Firefox that has been open since 2007. There is a similar issue here. Since I was able to correct the issue via triggering a reflow/redraw via Firebug I suspected that the issue was the same as the one previously mentioned and I used the following code to trigger the reflow on that block element:

@-moz-keyframes bugfix { from { padding-right: 1px ; } to { padding-right: 0; } }

.sf-menu a {
  -moz-animation: bugfix 0.001s;
}

Problem solved, I linked the bugzilla report to this question.