Global radio button styles included in this extension break the display of radio buttons on other webpages

[36degrees]

When the 'Save to Pocket' browser extension is enabled in Chrome, globally scoped CSS styles for radio buttons override the styles for radio buttons on other webpages, rendering them invisible and unusable.

Please treat this as high priority – I believe this issue may prevent users of this extension from being able to use some websites.

Steps to reproduce

1. Install the 'Save to Pocket' Chrome extension – tested with v4.0.0.
2. Go to http://govuk-frontend-review.herokuapp.com/full-page-examples/how-do-you-want-to-sign-in

Expected results

The radio buttons on the webpage should not be affected by the 'Save to Pocket' Chrome extension, and should look like this:

Actual results

The radio buttons are rendered invisible, and the positioning of the label is also affected. Selecting a radio button changes its appearance, but it is also rendered incorrectly.

You can see in the inspector that this is because the input, the :before and :after pseudo elements, and the label are all being targeted by the injected stylesheet:

The injected styles seem to match those defined in pages/injector/globalStyles.js (which seem to have been introduced for use on the options page in #249):

https://github.com/Pocket/extension-save-to-pocket/blob/4e3f65a7fc0d28e1dcd91b76984263fa7a76c356/src/pages/injector/globalStyles.js#L174-L266

Examples of other affected components

• NHS UK
• Bootstrap

[Bananas-Are-Yellow]

I have the same problem. It must be quite recent because it's so noticeable, especially for lists.

Save to Pocket seems to create an "injected stylesheet" in Chrome, which messes up the layout of list items on the page. If I disable Save to Pocket and reload the page, the problem goes away. You can see the problem clearly on this page:

https://github.github.com/gfm/

See how the contents are not indented. The injected stylesheet has padding: 0px set for lots of element types, including <ul> and <ol>.

But why is Save to Pocket messing with the CSS at all?

Chrome Version 94.0.4606.54 (Official Build) (64-bit) Pop!_OS (Linux)

[JipFr]

This also overrides heading weights and sizes. Essentially a global "normaliser" for every website on the internet.

[lwpinion]

Yes, this is a major problem for me. I have disabled the extension for now. There's a lot of negative reviews on the Chrome Web Store page reflecting that plenty of people are experiencing this.

[anthony-liddle]

Thanks for raising! We've put a fix together and submitted it to the Chrome Web Store for review.

The timeline for release is out of our hands at this moment, but it will roll out as an automatic update as soon as it's approved.

I will update and close this issue once it has been officially released.

https://github.com/Pocket/extension-save-to-pocket/pull/268

[rluetke]

Same Problem in MS Edge: all radio buttons are invisible. Workaroud: allow access to websites only after clicking on pocket button.

[Bananas-Are-Yellow]

Save to Pocket seems to have been updated and the obvious problems have gone, but DevTools is still showing an "injected stylesheet" which is not there if I disable the extension.

Why is this present?

[anthony-liddle]

The fix submitted to the Chrome Web Store yesterday has been released as version 4.0.1.

That update addresses the main issue which was causing overrides on visited web pages.

There is a remaining issue raised by @Bananas-Are-Yellow where color variables are still being injected globally. We are tracking this issue separately and plan to have a fix out next week: https://github.com/Pocket/extension-save-to-pocket/issues/270