Is There a CSS Workaround for Firefox' Bug: Inline-Block + First-Letter with Changed Size

Is there a CSS workaround for Firefox' bug: inline-block + first-letter with changed size

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.

css first letter glitch in Firefox

So I've found a small fix for your problem.
Since the issue got fix on page repaint, you can just add a small keyframe to force the repaint.

It's really hacky, but it works. Until Firefox fix the issue.
You can also decide to not use the ::first-letter pseudo-element, and use something more "hard coded", like wrapping the first letter of your tag with a <span>.

That being said, I've searched for a solution to your problem for a while, and a similar StackOverflow post helped me to get to this solution ( this one https://stackoverflow.com/a/7553176/1331432 )

a{

  font-size: 14pt;

  display: inline-block;

  animation: fix 0.00000001s;

}

.first-capitalized{

  font-size: 9pt;

  -moz-padding-end: 0;

  font-stretch: condensed;

}

.first-capitalized::first-letter{

  font-size: 14pt;

  color: red

}

@-moz-keyframes fix {

   from { padding-right: 1px; } 

   to { padding-right: 0; } 

}

<a href="">LOREM</a>

<a href="" class="first-capitalized">IPSUM</a>

<a href="">DOLOR</a>

<a href="" class="first-capitalized">SIT</a>

<a href="">AMET</a>

<a href="" class="first-capitalized">CONSETETUR</a>

<a href="">SADIPSCING</a>

<a href="" class="first-capitalized">ELITR</a>

::first-letter selector - IE11 has a different layout compared to Firefox

This is a well-known discrepancy between Firefox's treatment of floating ::first-letter pseudo-elements versus other browsers, documented in this bug report. Firefox is the only browser that follows CSS2.1 correctly here, which is ironic considering that Firefox is otherwise the browser where ::first-letter is most broken in (Chrome being a close second).

The bad news is that there is nothing you can do to work around this in other browsers without using some sort of browser hack.

The (sorta) good news is that the working group is planning to consolidate this behavior in CSS Inline Module Level 3 with the initial-letter-align property, and we can only hope that browser vendors implement it eventually.

display: inline block' trick not working in firefox

Just add the css rule below to your elements with inline style, it should fix it:

display: -moz-inline-stack;

Firefox whitespace oddity bug on a element

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.

---

Related Topics