www.pinko.com - Buttons not working

[gabrielelucci]

URL: https://www.pinko.com

Browser / Version: Firefox 125.0 Operating System: Linux Tested Another Browser: Yes Edge

Problem type: Site is not usable Description: Buttons or links not working Steps to Reproduce: Can't select color variants or size on the product page. The buttons just don't work.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[azlata]

Thank you for reporting this issue, I was able to reproduce it. On Firefox Release & Nightly, changing color/sizes is not possible, while on Chrome it works as expected.

https://github.com/webcompat/web-bugs/assets/164893854/b1ae1f7c-a097-40dd-8d4e-f1da55b7470e

Tested on: • Browser / Version: Firefox Nightly 127.0a1 (2024-04-21) / Firefox Release 125.0.1 / Chrome 124.0.6367.61 • Operating System: Windows 10

Notes:

1. Reproducible on both Firefox Release and Nightly
2. Not reproducible on Chrome.
3. Reproducible regardless of settings of Enhanced Tracking Protection

Moving to Needsdiagnosis.

[qa_17/2024]

[jrmuizel]

This works for me in Safari

[dholbert]

Looks like this is a regression, with regression range: Last good revision: 1995789cfffa08b612d3571d2e8596837f772a49 (2024-02-06) First bad revision: 1b492cccd574e45d5f16e2681b0286fd97236cdf (2024-02-07) Pushlog: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=1995789cfffa08b612d3571d2e8596837f772a49&tochange=1b492cccd574e45d5f16e2681b0286fd97236cdf

(that's possible to narrow further, but I'm on a slow connection at the moment)

[dholbert]

I suspect it's a regression from this:

Boris Chiou — Bug 1878758 - Follow shortest serialization principle for transition shorthand. r=zrhoffman

The site throws an exception when it loads, and if I put a breakpoint at the code that throws the exception and walk up the stack, it's in a JS function called parseTransition.

The site maybe/probably has a fragile dependency on our old transition serialization behavior.

[dholbert]

Yeah. When we get to the line of code in question (in https://www.pinko.com/on/demandware.static/Sites-pinko-us-Site/-/en_US/v1714430179241/js/main.js , function defined as key:"parseTransition",value:function(t){...}), old/working Firefox has the following in e.transition:

"transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s"

whereas new/not-working Firefox has:

"transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"

(presumably shorter due to bug 1878758)

The site then stores that in r and calls r = r.split(/\s(?=[^)^\]]*(?:\(|\[|$))/g) to split it into pieces, which in old/working Firefox produces the following 4-entry array:

Array(4) [ "transform", "0.3s", "cubic-bezier(0.645, 0.045, 0.355, 1)", "0s" ]

...but in new/not-working Firefox produces this 3-entry array:

Array(3) [ "transform", "0.3s", "cubic-bezier(0.645, 0.045, 0.355, 1)" ]

Then the site runs some JS that tries to parse r[1] and r[3] as durations, and that code throws an exception because r[3] is undefined now (since the string & array are shorter).

[dholbert]

For what it's worth, though, WebKit trunk (Safari Tech Preview & gnome-web/epiphany) matches our behavior; they omit 0s at the end of the serialization for transition here, and they hit the exact same breakage on pinko.com as a result.

[dholbert]

And per https://github.com/web-platform-tests/wpt/issues/43574#issuecomment-1852190860 it sounds like Chrome is going to change too, so this is a case where the site is depending on a legacy behavior that everyone had ~6 months ago and everyone is moving away from (and for the moment, it works in Chrome because Chrome is the last to implement this change).

[dholbert]

I added a note in bug https://bugzilla.mozilla.org/show_bug.cgi?id=1878758 , but at this point I think we should just consider this a case where the site's depending on a Chrome bug (which is likely to be fixed in Chrome soon).

[karlcow]

@foolip @flackr Could you help here in knowing if Chrome will push this change soonish?

[gabrielelucci]

So, full disclosure: I'm currently working for the company that develops this website, even though I'm not in the same team. I mostly already knew it wasn't a Firefox-specific issue, but since they wouldn't take the issue seriously, and only pushed a dirty workaround (that's possibly not live yet), I reported the issue here.

I've forwarded the very useful input from @dholbert to the tech lead, hoping they will actually address the issue, that is, relying on outdated client-side behavior.

[dholbert]

Thanks! That helps us skip past the "how do we get in contact with someone at the company involved to get this addressed" part. :)

Hopefully your internal outreach is successful, particularly given that all browsers have this change in the works (Firefox release; WebKit trunk, not on release yet; and Chromium folks are implementing it per https://github.com/web-platform-tests/wpt/issues/43574#issuecomment-2105325465 ).