Why does setting a :first-letter selector with whitespace cause mouse highlighting to be offset?

Question

Having an issue where by adding whitespace I get the following highlighting offset weirdness. Is this really expected behaviour?

This seems to affect Chrome/Safari

Issue is reproduced here: https://jsfiddle.net/qsa99cc6/

CSS:

p:first-letter {
    text-transform: uppercase;
}

HTML:

<p>
         highlight me! this won't work because there's whitespace in the &lt;p&gt;
</p>

<p>highlight me! This should work because there isn't</p>

Answer 1

It's behaviour is different on various browsers. So it could also be some sort of bug in the browser. Maybe those browsers identify the pseudo-element :first-letter the same way as the pseudo-elements :before and :after.