Styles not being applied immediately on some pages.

[Aqa-Ib]

Hello,
First, thank you very much for this program, I like it very much.

I am writing this to see if you can help to solve a problem present on Stylish for Firefox.

I am using Stylish on Firefox version 57.0.1 (firefox quantum). The problem is that on some pages, like in google search or bing search, the styles are applied after the page is loaded. This cause that if you are using a dark style, it flashes with the default white background color for a second before becoming dark.

You can see the problem following this steps:

1. Apply one dark style to Stylish. For example, this one is a very good one: https://userstyles.org/styles/31267/global-dark-style-changes-everything-to-dark
2. Search something on www.bing.com
3. Click on "next page" on the bottom of bing's search page.
4. On the browser's panel, click back to go to the previous page.
5. On the browser's panel, click next to go to the following page.
6. On the browser's panel, click back and next in succession to see the flashes.

Notice that the problem does not happen every single time.

I am pretty sure that this problem was not present on versions older than firefox quantum.
Also, using Stylish on Chrome web browser the problem does not appear.

Thank you very much sir,
Regards.

[alex-polosky]

I'm getting this same error on windows 10. I did some inspecting on the elements utilizing the page inspector, and discovered that the stylish styles were set as the first element when opening a new tab, while being applied as the last element upon reload/typed directly in.

An example: (note [ = lt and ] = gt)
[newtab]
[html]
[style id="stylish-foo" /]
[style id="stylish-bar" /]
[head/]
[body/]
[/html]

[direct link/typed]
[html]
[head/]
[style id="stylish-foo" /]
[style id="stylish-bar" /]
[body/]
[/html]

[jonhoo]

I wonder if this is related to an issue I'm seeing with pinned tabs. Specifically, if a tab is loaded in the background (likely because it is pinned), Stylish does not apply until the page in question is refreshed.

[Aqa-Ib]

Hello. I have looked into this problem and I have verified that writing a dark CSS style into Stylish causes the flashes, but writing the same exact dark style into Firefox's userContent.css resolves the flashes.

I have reported this issue to Mozilla developers.
https://bugzilla.mozilla.org/show_bug.cgi?id=1462070

One of them said:

If this is the Stylus source code:
https://github.com/openstyles/stylus
then the extension appears to inject a content script into every page that sends a message to the background page asking what styles to apply. This is always going to be racy (in addition to being needlessly expensive).
Using an API like this instead would be more efficient and would make styles available before the content is first displayed:
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/contentScripts/register

What do you think about it?