Why is this text too wide in Firefox? - css

Question

I have a site which uses CSS to create drop caps at the start of articles. This works as expected in most browsers, but Firefox (Linux and Android) displays it incorrectly, but only in certain instances.
On most pages, I get correct output, like this (the blue dashed lines at the side are the edges of the container, shown for illustrative purposes):
However, for a handful of pages, Firefox renders it thus:
Notice that there's a large gap to the right of the drop cap, and the text overflows the box by a corresponding amount.
Here's the relevant SASS:
article .first-paragraph {
text-indent: 0;
&::first-letter {
font-size: 300%;
font-weight:normal;
display: block;
float: left;
margin-right: 0.25em;
padding: 0.5em 0.3em 0.3em 0.5em;
background: $primary-color;
color: $background-color;
border-radius: 50em 5em 5em 5em;
font-family: 'Fredericka the Great', $base-font-family;
}
&::first-line {
font-variant: small-caps;
}
}
I have been unable to discover any difference which can account for this behavior. The articles are written in Kramdown-flavored Markdown and processed by Jekyll. The two articles are absolutely identical in Markdown except for the words themselves. And yet, the bug always happens on the same pages. I've tried setting the first few characters to be the same, but to no avail. I've also made the previous content follow the same structure, where there were differences in structure, but it didn't change anything.
Any ideas what might be wrong, or what I may have forgotten to test?
EDIT
I've narrowed the offending CSS down to the following rules:
article .first-paragraph::first-letter {
display: block;
float: left;
margin-right: 0.25em;
padding: 0.5em 0.3em 0.3em 0.5em;
}
If I turn them all off, the problem goes away. If I turn any one of them on, or any combination, the problem is back, except that display: block causes no issues on its own.
If you want to test it further, here's an example page with the bug (at least until I manage to fix it.
The more I think about it, the more I think that there must be something else on the affected pages beyond what I've posted here, which is causing the issue on Firefox on Linux, Windows, and Android. But for the life of me, I can't figure out what that something else is.