1904875 - Arrows ">" at the end of the questions are misaligned on td.com

Status: NEW

(Web Compatibility :: Site Reports, defect, P3)

Description

[Calin Tanase]

Attachment: FF vs Chrome.png

Environment:
Operating system: Windows 10
Firefox version: Nightly 129.0a1 (2024-06-25)

Steps to reproduce:

1. Go to https://www.td.com/ca/en/personal-banking/help-centre
2. Observe the questions.

Expected Behavior:
The arrows/backets ">" at the end of the questions are aligned correctly.

Actual Behavior:
The arrows/backets ">" at the end of the questions are misaligned.

Notes:

1. Screenshot attached
2. Reproducible regardless of the ETP status
3. Reproducible on Firefox Release as well
4. Not reproducible on Chrome
5. Issue found during WebCompat team [Top100] websites testing

Comment 1

[Daniel Holbert [:dholbert]]

This is bug 489100. The ">" arrow here is an absolutely-positioned element (an ::after pseudo-element, actually) which is positioned with respect to a relatively-positioned inline-level element that's serving as its containing block. And we're resolving bottom: 4px with respect to the first line of that inline-level element, instead of the last line (or the whole bounding box of all the lines).

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (partially reduced)

Here's a reduced testcase. Looking at the fuchsia "ARROW" word here, it's meant to go at the end of the paragraph. In Chrome, that's where it ends up. In Firefox, it ends up at the correct x-position, but we position it vertically upwards from that point, 4px above the bottom edge of the first line of text.