Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Site does not render correctly with Dark Reader in Firefox #113

Closed
rpkelly opened this issue Apr 6, 2023 · 5 comments
Closed

Site does not render correctly with Dark Reader in Firefox #113

rpkelly opened this issue Apr 6, 2023 · 5 comments
Labels
accessibility Issue in the accessibility of the site design-or-visual Problem with the design or visual representation of the site

Comments

@rpkelly
Copy link

rpkelly commented Apr 6, 2023

Path to the page with the problem (do not include domain name): Any documentation page

Describe the problem: When using Dark Reader in Firefox, site background is partially darkened, however none of the text is adjusted.

Screen Shot, if possible
image

Describe how the site should look? As below:
image

@jpmcb
Copy link

jpmcb commented Apr 6, 2023

Can confirm - getting a similar experience using Dark Reader on firefox

@stockholmux stockholmux added accessibility Issue in the accessibility of the site design-or-visual Problem with the design or visual representation of the site labels Apr 6, 2023
@stockholmux
Copy link
Member

The Docsy template itself seemingly works fine with dark reader, so it has to be in our colour overrides somewhere. I'll dig in

@stockholmux
Copy link
Member

stockholmux commented Apr 11, 2023

I think I've got to the bottom of this:

The same website code served from Hugo's internal web server look fine in Dark Reader on Chrome:

Screenshot 2023-04-11 at 7 48 16 AM

Same code served from the preview link provided to @rpkelly and @jpmcb is super broken (as illustrated above):
Screenshot 2023-04-11 at 7 48 13 AM

The difference between the two: the preview link is on a subdirectory (/foobar/) while the hugo server is at the root (/). The preview link also has an authentication step followed by a HTTP redirect. One javascript dependency from Docsy (the template) is hard coded to the root (/js/tabpane-persist.js).

screenshot-debug-redact

It looks like this is causing any further JS to just stop loading. Looks like Dark Reader relies partially on CSS injection as well as JS injection. Because the javascript vomits on the missing dependency, Dark Reader only partially loads and becomes super broken.

Next steps

  1. I need someone to confirm that this related to the preview site server.
  2. We should probably file an issue due to Docsy hard-coding a dependency to root (FWIW, they are moving from Bootstrap 4 to Bootstrap 5 at the time of writing and their development branch is not reliable for fixes, not sure if they would even accept a PR).

@stockholmux
Copy link
Member

Confirmed that this issue is related to the preview site server on two different machines with different browsers.

Closing this as it's not related to the code itself, just a temporary/preview server.

@stockholmux
Copy link
Member

Also, looks like this was fixed in google/docsy#1233

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Issue in the accessibility of the site design-or-visual Problem with the design or visual representation of the site
Projects
None yet
Development

No branches or pull requests

3 participants