Stylus on Firefox cannot detect History API changes

[gslin]

Description

1. Create a new style with:
   @-moz-document url-prefix("https://www.instagram.com/p/") {
   /* Some css effects */
   html {
   opacity: 0.1;
   }
   }
2. Visit a not-"/p"-url like https://www.instagram.com/gslin/ using Firefox.
3. Click one photo, and the url will change to https://www.instagram.com/p/...

Stylus in Brave (Chromium) will update the style, but not in Firefox.

System Information

• OS: XUbuntu 22.04 (XFCE)
• Browser: Firefox 139.0 (64-bit)
• Stylus Version: 2.3.14

Screenshots, links, CSS

[tophf]

The URL changes to https://www.instagram.com/gslin/p/....., there's gslin/ before p.

[gslin]

Thanks, but the url is not changed to /gslin/p/..., it's actually /p/...:

Also on DevTools:

[gslin]

@tophf would you reopen this issue, or maybe you would like to get more infromation?

[tophf]

I was wrong about the URL, but your code works for me, i.e. I can't reproduce the problem.

[tophf]

Try disabling other extensions or try a new profile with just Stylus.

[pabli24]

When there is another style enabled e.g. global or for the domain instagram.com then it works, but if there is only one style just for https://www.instagram.com/p/ then it doesn't work.

Workaround:

/* ==UserStyle==
@name           insta /p/ opacity
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */

@-moz-document url-prefix("https://www.instagram.com/p/") {
	html {
		opacity: 0.1;
	}
}
@-moz-document domain("instagram.com") {
	some-fake-selector {
		color: red;
	}
}

[tophf]

Thanks, I see it now.