Bugzilla

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:

```css
/* 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:

```css
.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:

```css
.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.