first-letter makes Chrome highlight in the wrong place [duplicate]

Question

When I use this CSScode to style the first letter of my text something weird happens in Chrome:

main p::first-letter {
  font-size: 300%;
}

<main>
  <p>
    This is some sample text
  </p>
</main>

When I now for example highlight the word 'is', the letters 'pl' of the word 'sample' get highlighted instead. You can test this here: jsfiddle

To make it more clear, this is what happens:

As you can see, the highlighted text is in the wrong place.

Is this my mistake or is this a bug in Chrome? How do I fix it?

Answer 1

I found why this is doing this. It's because of the "return" after the <p>.

So for prevent this behavior you have to write the balise <p> and his content in one line, like this :

<p>This is some sample text</p>

And not this way

<p>
    This is some sample text
</p>

I haven't find an another solution... Sorry.