Have you ever noticed a strange quirk in Chrome that you couldn't quite explain? I recently stumbled upon a peculiar "feature" while using fieldset with responsive design. It seemed that the text within the fieldset appeared disproportionately larger compared to the rest of the page content.
Curiously, when I removed a few characters from the text, the text size magically aligned with the other elements on the page.
For instance, I observed this behavior on a page generated by Chromium 49 using Device mode. The display was consistent on an Android smartphone running Chrome, while Firefox in responsive design mode showed no signs of this anomaly.
You can view the page https://i.sstatic.net/G6weq.png and examine the corresponding code. Notably, there are no external CSS files involved.
<html>
<head>
<style>
body{font-size:.8em;}
</style>
<body>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta sus
cipit ultricies.
Sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.
Vestibulum aliquam, neque sed ullamcorper tristique, arcu augue condimen
tum orci, id vulputate nisl mauris non mas.
</p>
<fieldset>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta
suscipit ultricies.
Sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.
Vestibulum aliquam, neque sed ullamcorper tristique, arcu augue cond
imentum orci, id vulputate nisl mauris non mas.
</p>
</fieldset>
<fieldset>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta
suscipit ultricies.
Sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.
Vestibulum aliquam, neque sed ullamcorper tristique, arcu augue cond
imentum orci, id vulputate nisl mauris non ma.
</p>
</fieldset>
</div>
</body>
</html>
Upon closer inspection, you'll notice that the text in the first <p> and the one inside the first <fieldset> are identical. However, the paragraph within the second <fieldset> contains one less character.
What could be causing this peculiar behavior?
One workaround involves adding fieldset{font-size:.999em;} to the styles, which seems to normalize the text size across all three paragraphs. But I'm more intrigued by the source of this unusual feature/glitch rather than relying on a temporary fix or hack.