CODEWITHSUNDEEP
cssfirefoxpseudo-element
Feirell
Feirell

Reputation: 789

css first letter glitch in Firefox

I encountered a CSS glitch in Firefox which works fine in IE and Chrome. The following example shows multiple a tags which should all be the smallest size possible and the a tags with .first-capitalized should have their first letter capitalized. But the altering with the pseudo selector ::first-letter destroys this behavior. Is there a css hack so it behaves like it does in Chrome and IE ?

(You can display the correct representation in Firefox, if you deactivate and reactive the font-size rule in the .first-capitalized selector set.)

a{
  font-size: 14pt;
  display: inline-block;
}
.first-capitalized{
  font-size: 9pt;
}
.first-capitalized::first-letter{
  font-size: 14pt;
}
<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>

Those fixen do not work reliable, after abou 20 refreshes they appear to lose their functionality!

EDIT:

I just wrote a "fix" in js which works just like the fix from @LukyVi

var continueFlag = true;
for (var i = 0; continueFlag && i < document.styleSheets.length; i++) {
    var sheet = document.styleSheets[i];
    for (var n = 0; continueFlag && n < sheet.cssRules.length; n++) {
        var rule = sheet.cssRules[n];
        if (rule.selectorText == '.first-capitalized') {
            var orig = rule.style['font-size'];
            rule.style['font-size'] = '0px';
            continueFlag = false
            window.requestAnimationFrame(function (rule) {
                //font size = 0px gets rendered
                window.requestAnimationFrame(function (rule) {
                    //font size = orig gets rendered
                    rule.style['font-size'] = orig;
                }.bind(this, rule))
            }.bind(this, rule)
            )
        }
    }
}

Upvotes: 3

Views: 2485

Answers (1)

LukyVj
LukyVj

Reputation: 1491

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>

Regards,

Lucas.

Upvotes: 4

Related Questions