1834521 - Use of text-transform: uppercase in ::first-letter selector causing extra whitespace in inline-block elements

Status: RESOLVED DUPLICATE of bug 385615

(Core :: Layout, defect)

Description

[owen.jones]

Steps to reproduce:

1. Create an element containing text, styled with display: inline-block
2. Add a selector to this element's CSS of ::first-letter and add text-transform: uppercase

Actual results:

The element adds unaccounted for whitespace to the end of the element text, extending the length of the element beyond it's text-defined width.

Codepen to illustrate the issue: https://codepen.io/owenatgov/pen/yLRZeZB

Expected results:

The element should not add extra whitespace to the end of the element text.

Comment 1

[Daniel Holbert [:dholbert]]

Thanks for the bug report. This is a version of bug 385615.

Firefox is mistakenly sizing the element as if the whole element had text-transform: uppercase (rather than just the first letter). That's where the extra space comes from here.