Stylus: Stylus block loading some elements on Allegro page when using any style

[SylwesterZarebski]

• Browser: Vivaldi - Chrome compatible - UA: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.106 Safari/537.36
• Operating System: Windows 10 x64 2004
• Stylus Version: 1.5.13
• Screenshot:
  

How to reproduce:

1. Install Dark Scrollbars - Quantum Nox style from https://userstyles.org/styles/177056/dark-scrollbars-quantum-nox
2. Open polish Allegro site and any item page, ie for above screenshot:
   https://allegro.pl/oferta/dzbanek-filtrujacy-dafi-astra-2x-filtr-bidon-9473096715#zadaj-pytanie
   a) or open any item and click on _Pytanie do sprzedającego_
3. Link should automatically open layer with question to seller which shows loading circle forever and console shows error:

opbox-eef854ee.es6.js:1 Uncaught (in promise) TypeError: Cannot read property 'split' of null
    at p (opbox-eef854ee.es6.js:1)
    at opbox-eef854ee.es6.js:1
    at Array.forEach (<anonymous>)
    at opbox-eef854ee.es6.js:1
    at async Promise.all (index 1)
    at async Promise.all (index 1)

After disabling style or Stylus there are no problems.

[SylwesterZarebski]

Correction. Tried with other styles, with any style installed above error occurs, i.e. created simple style with:

    * {
        text-rendering: geometricPrecision !important;
    }

I do not know what to think about...

[tophf]

This site processes its own stylesheets and expects all of them to have href so it fails when it encounters our inline stylesheets that don't have href. Although the site's code is incorrect in the sense that it makes weird assumptions and uses default parameter fallback that doesn't work for null, but still this bug is caused by the method Stylus uses to add stylesheets.

Not much we can do at this point as we're not actively working on switching to tabs.insertCSS (Chrome still doesn't have removeCSS). We could compile a list of bad sites like this and simply force them to use styleViaAPI. Thoughts, @eight04, @narcolepticinsomniac?

[SylwesterZarebski]

Thank You very much for information, i suggest this bas sites list be configurable to avoid waiting for global blacklist.
Also Wiki should have some info about sites undesired behaviour with Stylus.

[narcolepticinsomniac]

weird assumptions

I would've gone with a harsher adjective. Imagine presuming you have complete autonomy over the end user's experience. I'm not into adding jenky workarounds to accommodate poor coding. Not like I'm gonna argue against it if you decide it's worthwhile, but IMO, this is not our fault, or our problem.

[SylwesterZarebski]

@narcolepticinsomniac commented on 16 wrz 2020, 20:27 CEST:

weird assumptions

I would've gone with a harsher adjective.

Probably You're right, but what could You do when one of the biggest polish site is not working with an addon? If an Ebay or Amazon stop working with Stylus, what could You do?

[tophf]

Since this bug also affects Dark Reader and similar extensions, we should probably inform the site owners so they fix their code instead of making workarounds...

[narcolepticinsomniac]

If an Ebay or Amazon stop working with Stylus, what could You do?

Highly doubt we'd ever encounter such poor coding on either example, or practically any other website, for that matter. Anyway, this isn't an issue with Stylus not working - it's the site that isn't working, and it's their own fault. As tophf mentioned, the same conflict would exist with most similar extensions.

Can we work around it? Sure. Should we? Short answer is probably no, but I guess that's debatable.

one of the biggest polish site

That's news to me. You're certainly correct that we'd be more inclined to accommodate stupidity for popular sites. If this site qualifies, I suppose that's a factor I hadn't initially considered.

we should probably inform the site owners so they fix their code instead of making workarounds

Worth a shot if you can find a reasonable method of doing so.

[SylwesterZarebski]

I've send message to Allegro with link to this issue. I'll wait...

[SylwesterZarebski]

I've got e-mail from Allegro and send some more information, waiting for response.

[SylwesterZarebski]

Sad news, i've received response:

Skonsultowaliśmy Pana sprawę. Dział Techniczny nie potwierdza nieprawidłowości z naszej strony.
Proszę o skorzystanie z najnowszych wersji przeglądarek Chrome, Firefox, Opera bądź Edge.
Proszę wyłączyć wszystkie wtyczki, dodatki i programy wpływające na działanie przeglądarki (również antywirusy) oraz wyczyścić przeglądarkę z cookies.

What means in free translation:

Tech department do not find any problem.
Please use newest version of Chrome, Firefox, Opera or Edge.
Please disable all addons and programs changing way the browser works (also antivirus) and clear cookies.

I don't know what to say...

[tophf]

Well, right now you can use a different styling addon that utilizes chrome.tabs.insertCSS internally instead of Stylus. You can also write a personal extension with just one css file, it's quite trivial, see the tutorial (in case of css-only changes you obviously don't need to specify js files).

As for what Stylus can do, we'll think about it without rushing. Still waiting for @eight04 to see my first comment above.

[SylwesterZarebski]

It is not a critical problem and i can disable styles when using Allegro, but it is not very comfortable. Creating global exclude list could be very helpful.

PS. I didn't find any information that href property should or has to be non null, on the contrary, MDN mentions it could be null, which directly means that Allegro programmers are wrong.

[tophf]

You can already create a global exclude list by using the built-in browser feature: ExtensionSettings policy. In Windows this is done by editing the registry or by running a file with a reg extension like this:

REGEDIT4

[HKEY_CURRENT_USER\Software\Policies\Chromium]
"ExtensionSettings"="{\"clngdbkpkpeebahjckkjfobafhncgmne\": {\"runtime_blocked_hosts\": [\"https://allegro.pl\"]}}"

• In official Google Chrome you would replace Chromium with Google\Chrome.
• clngdbkpkpeebahjckkjfobafhncgmne is the id of Stylus extension
• runtime_blocked_hosts forbids Stylus to access this site so it won't add styles there
• to add more sites the part in [] brackets would look like this: [\"siteA\", \"siteB\", \"siteC\"]
• to view the policy open chrome://policy, you can also reload it by clicking a button there

[tophf]

And of course you can exclude the site from individual styles in the Stylus extension popup by clicking the three-dot icon to the right of any style.

[SylwesterZarebski]

Wow, thanks a lot, i did not know this menu!

[eight04]

We could compile a list of bad sites like this

Maybe we can have a list of this kind of sites but put them in FAQ?

If there are more reports like this, we can consider adding an option that allows users to specify which domain should use styleViaAPI.

Or, switch to adoptedStyleSheets in the future so we don't have to modify DOM.

[tophf]

Wow I forgot about adoptedStyleSheets. Maybe it's time we implement it...