Bug 296524 – Text becomes larger when overflowing inside a block with width: fit-content

• Component: Layout and Rendering
• Status: RESOLVED WORKSFORME

Created attachment 476185 [details]
A screenshot showing Safari calculating the elements font-size as 27px with it's source being the 10px set in the inline style.

On iOS, if an element with display set to block or inline-block, width set to min-content, fit-content or max-content and a set font-size has at least two child nodes that both contain something (either two elements, two text nodes or an element and a text node in either order) that together overflow the screen horizontally, then it's text will become larger than it should be.
Here is an example, the upper line of text has the correct `font-size` will the lower line as too large.

<meta name="viewport" content="initial-scale=1">
<div style="font-size: 10px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<a>A</a></div> <!-- 10px text -->
<div style="width: fit-content; font-size: 10px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<a>A</a></div> <!-- 17px text -->

[Radar WebKit Bug Importer]

<rdar://problem/157377363>

[Simon Fraser (smfr)]

This is text autosizing ("font boosting"). You can disable it with `-webkit-text-size-adjust: none`.