1840189 - In Amazon "Subscribe and Save" promo in shopping cart, the ">" button is clipped and looks like a ":"

Status: NEW

(Core :: Layout, defect)

Description

[Daniel Holbert [:dholbert]]

STR:

1. Sign in to Amazon.
2. View some product that Amazon considers a "subscribe-and-save" product, like https://www.amazon.com/gp/product/B07MHJFRBJ/ref=ox_sc_act_title_1?smid=ATVPDKIKX0DER&psc=1
3. Click "One-time purchase" and then "Add to cart"
4. View your cart (i.e. go to https://www.amazon.com/gp/cart/view.html )
5. Look at the "Save [whatever] with Subscribe & Save" link at the right, below the price.

ACTUAL RESULTS:
At the end of that link, there are two awkward-looking dots, which looks almost like a colon i.e. :

EXPECTED RESULTS:
There should be a > -- it's actually a 45-degree-rotated border-corner, rotated to look like > with a CSS transform.

Chrome gives EXPECTED RESULTS. Firefox gives ACTUAL RESULTS. There's some sort of clipping/positioning inconsistency here.

I'm using Firefox Nightly 116.0a1 (2023-06-22), tested on Ubuntu and macOS (reproduced on both).

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot (Firefox Nightly on left, Chrome on right)

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Here's a reduced testcase. The first black bordered area is the real testcase, and the second and third are for comparison.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (with ::after pseudo-element promoted to a real element)

To make things a bit more concrete & less magical, here's a version of that same testcase with an actual element instead of an ::after pseudo-element.

Comment 4

[Daniel Holbert [:dholbert]]

As indicated in comments within the testcase, the space inside of the "a-link-emphasis" element is relevant to triggering the bug.

This is true on the actual site, too -- if I trigger the bug on Amazon, and then use devtools to inspect this element and delete the whitespace inside of it, then that's sufficient to make the issue go away, and I do see the full ">" as-expected.

Comment 5

[Daniel Holbert [:dholbert]]

Our behavior here goes back quite a ways, using the attached testcases.

After adjusting the testcase to use rightinstead of inset-inline-end (which old builds don't recognize), I get a behavior-change on this range:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=30ea2905130e85f9e1d8d56fa3097901eec6514b&tochange=67cd1ee26f2661fa5efe3d952485ab3c89af4271

Both before and after that range, we smoosh "Text" right up against the right edge of its containing block (unlike Chrome). The thing that changed in that range is: before, we'd wrap the lime box to the next line. Now we don't. (Though actually, we do if you zoom in.)

I'm guessing this would probably have been from bug 1308876. Nonetheless, neither of these behaviors is really what Amazon is expecting here, so this wasn't really a regression from bug 1308876; we just changed from one unintended behavior to another.