shields.io doesn't work at all on Safari 15.2, macOS Monterey

[willhains]

Are you experiencing an issue with...

shields.io

🐞 Description

Safari: Version 15.2 (17612.3.6.1.6)
macOS: Monterey 12.1

• Clicking on any links does nothing.
• Clicking on badges does nothing.
• Badge creator UI doesn't display.

I tried disabling all browser extensions in Safari, to no effect.
I tried restarting Safari, to no effect.

The web inspector console shows the following errors & warnings.

[Error] SyntaxError: Invalid regular expression: invalid group specifier name
	(anonymous function) (a5f660104e61081cc75f27105d31d879c7b5c92d-4b0c973ec07360cf14b8.js:2)
[Warning] The resource https://shields.io/page-data/category/size/page-data.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.
[Warning] The resource https://shields.io/page-data/app-data.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

🔗 Link to the badge

No response

💡 Possible Solution

No response

[chris48s]

This looks like it is related to, or possibly a duplicate of #7324

I don't use a mac so I can't confirm or reproduce this. I'm going to leave it tagged "question" for the moment pending a confirmation but I'm marking it "good first issue" as it would be really useful to get some help from the wider community on these Apple-specific issues.

[willhains]

@chris48s I don't know how much I can help with the fix, but I can certainly gather more info (debug console messages, for example) if needed.

As a starting point, can you tell me which platforms and browsers shields.io is tested on?

[chris48s]

We run our frontend tests using cypress which is Chrome-based.
I also usually check frontend dependency bumps in Firefox on an ad-hoc basis.

My theory is that this issue is caused by sindresorhus/decamelize#36 after upgrading decamelize in #7098

I've submitted a PR over at #7449 to revert decamelize to version 5. I have no way of testing this myself but is someone who has an i-Device of some description able to check the staging deploy at https://shields-staging-pr-7449.herokuapp.com/ and see if that fixes it in Safari? The staging deploy is on a dyno that goes to sleep so it might take a while to load

[paulmelnikow]

My Safari is 14.1.2 which works fine on https://shields.io/ and https://shields-staging-pr-7449.herokuapp.com/, so I can't verify this one way or another.

[calebcartwright]

I also usually check frontend dependency bumps in Firefox on an ad-hoc basis.

Ditto. I know there are services out there that facilitate the execution of UI/functional style testing against various platform/browser matrices, but we definitely don't have anything like that in place and likely wouldn't have the budget for such a service anyway (though I imagine a few offer some free credits for open source)

[willhains]

I have no way of testing this myself but is someone who has an i-Device of some description able to check the staging deploy at https://shields-staging-pr-7449.herokuapp.com/ and see if that fixes it in Safari?

@chris48s Unfortunately, this doesn't work on Safari 15.2 either. Same behaviour as the production shields.io, I'm afraid. :(

[platan]

I can confirm this bug on Safari 15.2 (17612.3.6.1.6).

Problem was introduced in 0854e90 and the last working commit is 8fcdb76. I found it using git bisect.

Unfortunately Cypress does not support Safari, so I used https://playwright.dev instead.

playwright-test.spec.ts:

import { test, expect } from '@playwright/test';

test('basic test', async ({ page }) => {
  await page.goto('http://localhost:3000/');
  await page.click('a[href="/category/build"]');
  const pageTest = page.locator('body');
  await expect(pageTest).toContainText('/appveyor/build/:user/:repo');
});

test.sh

#!/bin/sh
set -x
git --no-pager show --name-only
rm -rf node_modules
git checkout -- .
npm i
npm i -D @playwright/test
npm i -D start-server-and-test
git checkout -- .
./node_modules/.bin/start-server-and-test 'npm start' 3000 'npx playwright test --browser webkit playwright-test.spec.ts'

and finally:

$ git bisect start HEAD 5a982f62e7e3077b0e16d122d4adb0229e037632
$ git bisect run ./test.sh
# [...]
0854e90e9037e7398cc929502b1c74295c1702d5 is the first bad commit

[chris48s]

New staging deploy up. Can we try this one?
https://shields-staging-pr-7449.herokuapp.com/

[platan]

Works perfectly (Safari 15.2 (17612.3.6.1.6)).

[willhains]

Confirmed working for me as well.
(macOS Monterey 12.1, Safari 15.2)
Yay! 🎉
Thank you very much @platan and @chris48s!