-
Notifications
You must be signed in to change notification settings - Fork 45
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
Browser background overriden #1354
Comments
Hi! Thank you for filing this. Sorry for the trouble 10ten is causing you here. I'm afraid the link didn't work for me. I get |
Apologies, I accidentally used image markdown syntax. |
Just to clarify, It's not 10ten being buggy or something, other extensions can make this happens too, because we all need to put the elements into the html so things show up. It's just that sometimes the elements are not covered by the customization css. For example, this css is not covering something from 10ten on some sites and results in the white flash: #main-window,
#browser vbox#appcontent tabbrowser,
#content,
#tabbrowser-tabpanels,
tabbrowser tabpanels,
browser,
browser[type=content-primary],
browser[type=content] > html {
background: #111111 !important;
} |
For example, with 10ten enabled, the white flash happens when opening https://www.woltlab.com/en/ from other sites or new tab. |
Hmm, I'm not sure. I'll need to look into it a bit more tomorrow. I don't think 10ten should be adding anything to the page until you hover over something (it used to add this There was another bug a long time ago where 10ten was causing flicker on page load for some pages but I'm pretty sure that was fixed too. I don't suppose you have the puck enabled? (Unlikely). Another possibility is that when the 10ten script is injected it is affecting the first paint timing such that the page gets painted before the user stylesheet is applied. It seems unlikely (if that were the case, I'd expect other web pages to have the same problem, and I'd expect |
Actually, I do have the puck enabled! I just didn't bother to disable it 🤣 And the white flash really just stop showing up if I disable it. And on the website showing white flashes, there IS a It seems like we are getting close to an answer very quick, no? |
I dug into this a bit and here's what I found out so far. Looking at https://www.woltlab.com/en/, it uses JS to set However, that JS runs as part of a render-blocking script: const colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
document.documentElement.dataset.colorScheme = colorScheme; Furthermore, the styles are in a render-blocking stylesheet. So all of that should happen before the first paint. So even if injecting the puck and safe area provider triggers a sync layout flush, nothing should be painted until the script and stylesheet that set up the dark mode have been run/applied. However, it looks like content scripts behave differently. If I set a breakpoint on the code that sets up the dark mode attribute I can see that the puck has already been injected even before the page is first rendered: So it looks like content scripts are able to run before the scripts in web pages and trigger a paint too. If that's the case, I guess we could try to have 10ten delay injecting its puck and safe-area-provider until the document reaches the |
I don't have enough front end knowledge to have a opinion, so let's just try that 😄 |
For context, some Firefox users do customization like this to stop white flash every time a page is being loaded, because our nocturnal eyes can't take the brightness and it hurts.
My customization hasn't been working properly for some sites and I decided to investigate. After some toggling I figured out it's caused by 10ten.
I don't expect this to be "fixed" on your end, but I hope maybe we can figure out what element is that white flash so I can add it to the css to override its background color.
firefox_jtnwW0nMjV_sped.mp4
The text was updated successfully, but these errors were encountered: