1682380 - Negative text-indent not being applied in a flex layout, but it is in Chrome

Status: RESOLVED INVALID

(Core :: Layout: Flexbox, defect)

Description

[Thomas Wisniewski [:twisniewski]]

Attachment: testcase.html

As reported on webcompat.com, Reddit has icons overlapping the text which should be next to them.

The basic issue is that a negative text-indent is not being applied the same way by Firefox, so the icon ends up overlapping with the text:

// HTML
<a target="_blank"><span></span>Should not overlap the X</a>

// CSS
span::before { content: "X"; }
a { display: flex; text-indent: -15px; }

I've attached a full reduced test-case; I'm not sure which behavior is correct here by spec.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 2, comparing anonymous vs. explicit flex item

Comment 2

[Daniel Holbert [:dholbert]]

I think this is a Chromium bug, not a Firefox bug.

Firefox and Chromium agree on the rendering if you use an explicit flex item (i.e. if you wrap the original testcase's "Should not..." text in an explicit element) Chrome has a different behavior when that text is in an anonymous box, for no good reason that I can see.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 3, with positive text-indent (showing another case where Chromium is inconsistent)

Comment 4

[Daniel Holbert [:dholbert]]

I reported this as a chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1159311