1547597 - FF 66: User css cannot override certain site css

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect, P4)

Description

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:60.0) Gecko/20100101 Firefox/60.0

Steps to reproduce:

Certain sites use

transform: scale(1.1)

to zoom images on mouseover.

This reliably triggers my migraines, so for certain sites, I use the following user css to try to protect against these transitions:

/* block some transitions */

@-moz-document domain("transadvocate.com"), domain("advocate.com"), domain("washingtonpost.com"), domain("threadreaderapp.com"), domain("humblebundle.com"), domain("userstyles.org"), domain ("reddit.com"), domain("amazon.com"), domain("patheos.com") {

* { transform: none !important; }
* { -moz-transform: none !important; }
* { -webkit-transform: none !important; }
* { animation: none !important; }
* { transition: none !important; }
* {-moz-transition: none !important; }
* {-webkit-transition: none !important; }

}

/* remove background images */

.clear-background{ background-image: none ! important }
* { background-image: none ! important }
.carousel-image {display: none ! important }

@-moz-document domain("patheos.com") {

.writer-theme{ background-image: none ! important }
.social-sharing .icons {display: none ! important }
.path-affix.affix{display: none ! important }

Actual results:

This css fails on advocate.com, userstyles.org, and patheos.com.

On the Advocate, the following code causes zooming, despite the above css to block transform:

.featureImageBox picture img:hover, .panel-image picture img:hover, .skyboxeSection .col-md-2 img:hover, .hero-box .playBtn img:hover, .latestNewsSection .playBtn img:hover, .hubSection .playBtn img:hover {
    transform: scale(1.1);
}

And this causes ease in-out, which adds more pain to the pain:

.featureImageBox picture img, .panel-image picture img, .skyboxeSection .col-md-2 img, .hero-box .playBtn img, .latestNewsSection .playBtn img, .hubSection .playBtn img {
    transition: transform 500ms ease-out 0s,opacity 500ms ease-out 0s !important;

I can't find the sado-code on userstyles.org, but images jump on mousever, which triggers migraines.

I can't figure it out on Patheos.com, but it seems to cycle between -moz-transform, -webkit-transform, and transform, and not allow me to block all three at the same time.

I see different coding in WF 56 and FF 66, but the same sadistic zooming either way.

On WF 56, I see transform: scale(1.1) and manually unchecking the three transform codes keeps the image from zooming.

On FF 66, I see transform: scale(1) which shouldn't zoom, and even after manually unchecking, it still zooms.

Expected results:

Use css marked !important should override site css.

Comment 1

[Alice0775 White]

I think it need to specify ':hover pseudo-classes' as follows.

*:hover { transform: none !important; }
...

Comment 2

[MarjaE]

Thanks, but that still requires manually unchecking the harmful code.

If I manually disable the transform line of harmful code, then the debugger enables -webkit-transform.

Comment 3

[Virginia (please send need info request to Brindusa Tot)]

Hi MarjaE,

Can you test if you can reproduce this issue using the latest Firefox Nightly? You can download it from here: https://nightly.mozilla.org/ and retest the problem.

It would be helpful if you could share with us a screen recording of the exact steps, test page url, specific code you are inputting, and the result you are seeing so we can try to reproduce it on our end.

If there is any other additional info you can provide, please share it with us.

Thanks for your contribution!

Comment 4

[Emilio Cobos Álvarez [:emilio]]

It shouldn't be required to use *:hover and such. User styles should override all author styles.

Does it work if you use @-moz-document domain("www.advocate.com") instead of domain("advocate.com") and such? It's probably an issue with @-moz-document rather than with user styles in particular.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

Hmm, reading the code, that should work either way. I'll take a closer look.

Comment 6

[MarjaE]

I lost my safety/accessibility fixes, and got hurt, the only time I tried Nightly. See bug 1489364.

Comment 7

[MarjaE]

I retested with @-moz-document on the Advocate, and on Patheos, and it still does not work on either of those sites.

Comment 8

[Emilio Cobos Álvarez [:emilio]]

Yeah, so I just tried this. If my userContent.css looks like:

@-moz-document domain("transadvocate.com"), domain("advocate.com"), domain("washingtonpost.com"), domain("threadreaderapp.com"), domain("humblebundle.com"), domain("userstyles.org"), domain ("reddit.com"), domain("amazon.com"), domain("patheos.com") {
  * {
    transition: none !important;
    transform: none !important;
  }
}

It doesn't work (the images transition). If I remove the @-moz-document rule so that it applies globally then it works. So that seems to match my suspicion that it's @-moz-document related, not more general. I'll debug this a bit.

Comment 9

[Emilio Cobos Álvarez [:emilio]]

Ah, I see what's going on, that @-moz-document rule is invalid, so it gets dropped. In particular domain ("reddit.com") should be domain("reddit.com"). That's why it gets dropped. Can you confirm that with that fixes it works as expected?

Comment 10

[Emilio Cobos Álvarez [:emilio]]

We could do a better job at reporting errors in userContent / userChrome.css... Let me look at how hard would that be.

Comment 11

[Emilio Cobos Álvarez [:emilio]]

Patrick, do you know if / where would a script message without a window ID appear on devtools? I assume nowhere?

Comment 12

[Patrick Brosset <:pbro>]

Let me transfer this over to Nicolas who would probably know better than me.

Comment 13

[MarjaE]

With what fix?

Comment 14

[Emilio Cobos Álvarez [:emilio]]

Replacing domain ("reddit.com") by domain("reddit.com").

Comment 15

[MarjaE]

Thanks. It does not work.

Comment 16

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #11)

Patrick, do you know if / where would a script message without a window ID appear on devtools? I assume nowhere?

At least it doesn't appear in the console: https://searchfox.org/mozilla-central/rev/8308eb7ea14318f53b55f3289c2bb9b712265318/devtools/server/actors/webconsole/listeners/console-service.js#72
It might still be displayed in the terminal? Not sure about that though.

Comment 17

[Emilio Cobos Álvarez [:emilio]]

If it's not displayed it's probably not worth the effort to pipe the errors through...

(In reply to MarjaE from comment #15)

Thanks. It does not work.

It works for me with that change... I assume that without the @-moz-document rule it works, right? If so, if you could bisect what exactly makes the rule not apply (does just domain("advocate.com") work?) and such it'd be helpful.

Comment 18

[MarjaE]

It works if it only lists that domain, and then the code to protect against it.

It still lets the site punch me if it lists several domains, and then the code to protect against all those domains.

Comment 19

[Emilio Cobos Álvarez [:emilio]]

Can you attach your userContent.css file when it doesn't work using the "Attach File" button?

Comment 20

[MarjaE]

Attachment: failing userContent.css

Comment 21

[Emilio Cobos Álvarez [:emilio]]

There's no @-moz-document in the first rule?

If you replace the following line:

domain("transadvocate.com"), domain("advocate.com"), domain("washingtonpost.com"), domain("threadreaderapp.com"), domain("humblebundle.com"), domain("userstyles.org"), domain ("reddit.com"), domain("amazon.com"), domain ("credoaction.com"), domain("patheos.com") {

By this:

@-moz-document domain("transadvocate.com"), domain("advocate.com"), domain("washingtonpost.com"), domain("threadreaderapp.com"), domain("humblebundle.com"), domain("userstyles.org"), domain("reddit.com"), domain("amazon.com"), domain("credoaction.com"), domain("patheos.com") {

(Note that I also had to remove some whitespace after domain for reddit.com and credoaction.com)

Then it works.

Comment 22

[MarjaE]

I had that prefix when I reported the bug, but I guess the whitespace screwed it up. Thank you.

Comment 23

[Emilio Cobos Álvarez [:emilio]]

Ok, closing as invalid as the underlying reason is that the stylesheet was invalid.

I'd love to give better errors for this, but it seems a bit hard to show something on devtools per comment 16, since by the time we load that stylesheet it's too early and we have no window or document around.

Do you have any good ideas to know how to expose these errors better? I think a user-stylesheet editor of some sort would be pretty cool and we could put the errors there, but it seems hard too, and I think people lately want to move more to stylish and such addons rather than userContent.css... If you have feedback on that I'd recommend to open another bug with your suggestions or comments.

Thanks for filing the bug :)