1904881 - Remove button "X" is misaligned when comparing accounts 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/products/bank-accounts/chequing-accounts/student-chequing-account
2. Click on the checkbox "Compare Account".
3. Observe the "X" button displayed for the "TD Student Chequing Account" in the drop-up menu.

Expected Behavior:
The "X" button is displayed on the top right corner of the account icon.

Actual Behavior:
The "X" button is 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 a positioning issue with abspos content inside of a display:inline; position:relative; container. The page has an element with these styles, which then serves as a containing block for an abspos child with auto insets (the "x" icon):

.cmp-compare-sticky-drawer__remove-prod-btn {
	display: inline;
	position: relative;
	top: -20px;
	left: -10px;
	height: 36px;
	width: 36px;
}

...and we end up positioning the abspos child's placeholder-frame incorrectly.

I think this is essentially a version of bug 489100.