Closed Bug 1904875 Opened 2 years ago Closed 15 days ago

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

Categories

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

Product:
Web Compatibility
Component:
Site Reports
Version:
Firefox 129
Platform:
Desktop
Windows 10
Type:
defect

Tracking

(Webcompat Priority:P2, Webcompat Score:6, firefox127 wontfix, firefox129 wontfix, firefox158 fixed)

Status:
RESOLVED FIXED
Project Flags:
Webcompat Priority P2
Webcompat Score 6
Tracking Flags:
Tracking Status
firefox127 --- wontfix
firefox129 --- wontfix
firefox158 --- fixed

People

(Reporter: ctanase, Unassigned)

References

(
URL
)

Details

(Keywords: webcompat:platform-bug, webcompat:site-report, Whiteboard: [webcompat:core])

User Story

platform:windows,mac,linux,android
impact:significant-visual
configuration:general
affects:all
diagnosis-team:layout
user-impact-score:400

Attachments

(2 files)

FF vs Chrome.png
345.60 KB, image/png
Details
testcase 1 (partially reduced)
8.42 KB, text/html
Details
Attached image 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
Severity: -- → S3
User Story: (updated)
Keywords: webcompat:needs-diagnosis, webcompat:site-report
Priority: -- → P3

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).

Depends on: 489100
Keywords: webcompat:needs-diagnosis

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.

Webcompat Priority: --- → P2
Webcompat Score: --- → 6
User Story: (updated)
Whiteboard: [webcompat:core]

I see the expected behavior with layout.abspos.fragment-aware-inline-cb.enabled=true. The arrows ">" at the end of the questions are aligned correctly. We'll flip the pref by default in bug 2041551.

Status: NEW → RESOLVED
Closed: 4 months ago
User Story: (updated)
No longer depends on: 489100
Duplicate of bug: 489100
Resolution: --- → DUPLICATE

Reopening the bug and making it depend on bug 2041551.

Status: RESOLVED → REOPENED
Depends on: 489100, 2041551
No longer duplicate of bug: 489100
Resolution: DUPLICATE → ---

The issue has been fixed.

Tested with:

Browser / Version: Firefox Nightly 158.0a1 (2026-09-13) (64-bit)
Operating System: Windows 10 PRO x64

Status: REOPENED → RESOLVED
Closed: 4 months ago → 15 days ago
Resolution: --- → FIXED
status-firefox158: --- → fixed
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: