Is there a CSS workaround for Firefox' bug: inline-block + first-letter with changed size
css, firefox
Solution
I've found that triggering reflow on the whole page (or any block with a problem) fixes the problem, so I've found a way to trigger it on every such block with one-time CSS animation: http://jsfiddle.net/kizu/btdVd/23/
Still, while this fix have no downsides in rendering, it have some other ones:
- it would work only for Fx5+ (that supports animations);
- it still flashes the original bug for a few ms, so it's maybe somewhat blinky.
So, it's not an ideal solution, but would somewhat help when Fx4- would be outdated. Of course, you can trigger such fix onload with JS, but it's not that nice.
Problem
It's better to see a bug for yourself in Firefox: http://jsfiddle.net/kizu/btdVd/ The picture, showing the bug: And the bug filled in 2007 on bugzilla. The bug appears when you're adding `::first-letter` pseudo-element with `display: inline-block`, and then change the `font-size` of this `first-letter`. More letters in a word after the first: more extra space added (or subtracted — if the font-size is lesser than block's). Adding `float: left` to the `first-letter` inverts the bug: with bigger font-size the width of `inline-block` shrinks. So, the question: is there any CSS-only workaround for this bug? It's somewhat killing me.