stylus icon indicating copy to clipboard operation
stylus copied to clipboard
verified publisher icon openstyles

Flashing of unstyled content (FOUC) on Firefox reload and navigation

Open jultty opened this issue 9 months ago • 14 comments

Description

Tried using Stylus to accomplish a global dark mode and could not get rid of flashing on some page navigation, reload and hard reload actions. While easy to reproduce, it is not consistent. For instance, sometimes only a hard reload will trigger it, but a subsequent hard reload won't.

Steps to reproduce:

  1. Install add on a fresh profile
  2. Add a style with e.g. * { background-color: black; color: white; }
  3. Navigate between pages, refresh and hard-refresh

Enabling "Instant inject mode" does not solve it and was done in the tests below.

Expected outcome: No flashing

System Information

  • OS: Tested on Alpine 3.21, LMDE 6
  • Browser: Firefox ESR 128.8, LibreWolf 135.0, Firefox 136.0
  • Stylus Version: 2.3.14 and 2.3.13

Screenshots, links, CSS

I apologize for the poor video quality, specially on the Linux Mint video, which I noticed only after the recordings were done.

CSS for unpublished styles:

* {
    background-color: black !important;
    color: white !important;
}

jultty avatar Mar 11 '25 22:03 jultty

I couldn't reproduce the problem after trying for a long time and I don't remember seeing it in Firefox even without instant inject enabled. I wonder if it's caused by another extension or a setting in Firefox's settings or about:config or a problem in the GPU driver specifically in Firefox. I would try tweaking some setting for GPU and hardware acceleration in about:config and settings.

tophf avatar Mar 11 '25 22:03 tophf

I see that you've already used a new profile, so out of my suggestions the only pertinent part is "tweaking some setting for GPU and hardware acceleration in about:config".

tophf avatar Mar 11 '25 22:03 tophf

Thank you for the quick response. I'm sad to hear that, as it seemed otherwise like the superior choice over any other add-on. The Linux Mint test was on a completely different machine by the way, so I'm really surprised it's not reproducible.

I had hardware acceleration on, and toggling it does not seem to do anything. If you are willing to point me towards any of the about:config options I could tweak, I'd be very grateful.

jultty avatar Mar 11 '25 23:03 jultty

Try using the built-in functionality: userContent.css

tophf avatar Mar 11 '25 23:03 tophf

Tophf, first of all, thanks for the patch 2.13 for chromium the issue with disabling styles has been fully fixed, and i haven't had any problems since. #1915

However, on firefox, I have the same issue of the author (FOUC), especially on the mobile version of FF.

Firefox:

  • version 1.5.51 → very minimal fouc
  • version 2.3.12 → more fouc, but with "instant injection mode" and restart browser → NO FOUC
  • version 2.3.13 → more fouc, and the "instant injection mode" option doesn’t seem work
    https://streamable.com/92yodt (2.3.13 / FF Mobile / instant mode activate)

I’ve always had a tiny bit of FOUC on mobile, but since version 2.3.12, it’s become more noticeable,

And since version 2.3.13, the instant injection mode doesn’t seem to fix the issue.

it also happens a bit on pc Firefox, but it’s less noticeable : https://streamable.com/t6bm5h

Skins and site (already the same that in the last issue) : https://www.jeuxvideo.com/forums.htm https://userstyles.world/style/17542/

(Page by page website (95%) ).

thanks again, it's not very important as the issue with Chrome and the old disabling of styles . But , it's frustrating because it's work relatively well with "instant injection" on 2.3.12 and now not ^^

PS : I have test the 2.3.14 on FF PC. The issue is the same.

Lantea-Git avatar Mar 14 '25 05:03 Lantea-Git

Instant inject didn't work in 13, it's fixed in 14. I can't reproduce the problem in 14 neither on PC nor in Android... Try toggling the option back and forth, try disabling other extensions, try testing a new browser profile.

tophf avatar Mar 14 '25 06:03 tophf

Instant inject didn't work in 13, it's fixed in 14. I can't reproduce the problem in 14 neither on PC nor in Android... Try toggling the option back and forth, try disabling other extensions, try testing a new browser profile.

It's edit ^^ 👀 ? :

Image

Okay I'm sorry I have download the version 2.3.14 And With the instant inject => The issue is solde for me. (with 2.3.14)

But I need, restart the browser for apply the change.

But is work. And yes I have a lot of userscripts and an old tel ^^

Buts with the instant injection on 2.3.14 , It's work for me.

I will wait the publish on the Firefox store For confirm on mobile. I know it possible to Import extension on mobile but i wait .

If it okay on mobile with the instant injection . I will edit this post.

Thanks again.

Lantea-Git avatar Mar 14 '25 06:03 Lantea-Git

Yeah I edited the log, because when I released it I forgot that the fix was affecting this option.

tophf avatar Mar 14 '25 06:03 tophf

Yeah I edited the log, because when I released it I forgot that the fix was affecting this option.

It's all good, Tophf. I was able to test on Firefox Mobile 2.3.14, and the instant injection mode is working again.

It still feels strange to have to restart the browser to apply the modification (on Firefox PC and mobile). (I don't remember that being necessary before (1.5.x).)

In any case, the instant injection mode is working again on Gecko.

Thanks again!

Lantea-Git avatar Mar 23 '25 02:03 Lantea-Git

I am getting the same FOUC on FF. Is this on the map to be fixed?

justingallant1988 avatar Apr 05 '25 02:04 justingallant1988

I have no idea how to replicate this problem and I've never encountered it in Firefox.

tophf avatar Apr 05 '25 04:04 tophf 

/* 
Remove -color from background-color to make it more concistent on all website.
background override background-color if set by the website.
*/

* {
    background: black !important;
    color: white !important;
}

/* 
Need to be confirmed/tested. This is from memory.
*/

SkyOps117 avatar Jun 22 '25 11:06 SkyOps117

@SkyOps117 this does not seem to make a difference on my end.

I can still reproduce this, namely on the zsh website as shown in the videos. It's not 100% of the time I navigate between pages, but every now and them there is a flash. I have no idea what precisely causes it.

One sequence I just tried to test background-color vs background was clicking the "Index" link at mostly any manual page (my test was at this one).

Looking at their source code, I see a style element with its whole content commented out, inline bgcolor="#FFFFFF" at the body, which may be some odd/legacy reasons why it happens there in particular.

I've been using a JS userscript to prevent this on offending websites only by prepending the overrides to the head and then removing them after the page loads. This seems to work fine with other addons, including Stylus, as it leaves no traces behind.

jultty avatar Jun 27 '25 08:06 jultty

For all case scenario I ended up using a bookmarklet I wrote for dark theme. (Javascript inside a bookmark) An extension would be better for having it all the time. My crude approach was to query all element of the page but, it works for all case scenario for reading text. Must add code for taking care of images.

background probably break images

background-color might be better choice

Bookmarklet I made:

javascript: (() => {
  const DocumentALL = document.querySelectorAll("* :not(img)");
  DocumentALL.forEach(element => {
    element.style.color = "#00ff00";
    element.style.backgroundColor = "#000000";
  });
})();

SkyOps117 avatar Jul 21 '25 09:07 SkyOps117