1378447 - Arrow buttons misaligned on mobile view of msn.com

Status: RESOLVED WORKSFORME

(Core :: Layout, defect, P3)

Description

[Daniel Holbert [:dholbert]]

Filing this for https://github.com/webcompat/web-bugs/issues/7615

Steps to Reproduce

1.   Navigate to: http://www.msn.com/en-us/money/spending
2.   (optional) Tap “Next” button on second menu bar
3.   Observe “Next/Prev” buttons layout.

Expected Behavior:
Buttons are correctly aligned on the menu bar (vertically centered, aligned with text)

Actual Behavior:
Buttons are misaligned.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (partially reduced)

Comment 2

[Daniel Holbert [:dholbert]]

Comment on attachment 8883637 [details]
testcase 1 (partially reduced)

With this testcase, Chrome renders the "AAA" and "BBB" text at approximately the same Y-position (a few pixels difference, but not much).

Firefox renders "AAA" and "BBB" on completely different lines.

Comment 3

[Daniel Holbert [:dholbert]]

Edge 15 matches Chrome's rendering, FWIW.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: (testcase 1.9 - ignore)

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (reduced further)

On testcase 2:
 - Firefox aligns the "Am I snapped..." text with the center of the buttons.

 - Edge + Chrome instead push the "Am I snapped..." text with the bottom of the buttons.

Firefox is probably deriving the button's baseline from its internal button-contents wrapper-box (which is vertically centered), whereas Chrome and Edge are deriving it from the button's border.

(This discrepancy only matters for buttons that have no contents [or only abspos placeholders as their contents].   For buttons that have text inside of them, everyone agrees that the button-text's baseline should be used as the button's baseline.)

Comment 6

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 7

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.

Comment 8

[Thomas Wisniewski [:twisniewski]]

This doesn't appear to be an issue anymore. Firefox, Chrome, and Safari render the text similarly on different lines now, and MSN's layout has since changed and no longer has this issue.