Mootools and CSS - p:first-letter does not function once JS is active

Question

here's the fiddle setup: CSS pseudo class fails with JavaScript

for some reason the 'first-letter' psuedo-class works fine WITHOUT the JS. as soon as i start pulling quotes with this:

$$('span.pullQuote').each(function(span) {
new Element('span',{ 'class': 'pulledQuote',
                      text: span.get('text')
                    }).inject(span.getParent(),'top');
});

it stops working... why? yank out the JS, leaving everything else alone and it works fine... and i re-read the W3 spec on first-letter and still don't see where this is breaking.

TIA.

WR!

edit: strangely, first-line, first-child, &c all work fine with the JS. only first-letter stops working.

Answer 1

Chrome and IE have no trouble with this setup, it's only Firefox that has issues. Unfortunately there is no easy fix. This question shows the same problem (though there it was generated content that was highlighting it).

It's related to this bug (I think). Try looking at the reduced test case in Firefox and it fails. This has been around for years now, so I wouldn't hold your breath waiting for it to get fixed. The only solution will be to not place the pulledQuote class as the first child of your paragraph.