Sites override userContent.css
Categories
(Core :: CSS Transitions and Animations, defect)
Tracking
()
People
(Reporter: erwinm, Unassigned)
Details
Attachments
(1 file)
|
38.39 KB,
image/png
|
Details |
Screen Shot 2022-10-08 at 11.34.58 AM.png
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:105.0) Gecko/20100101 Firefox/105.0
Steps to reproduce:
-
I get migraines from smooth and/or zooming animation.
-
Among other accessibility fixes I use userContent.css including:
/* block some transitions */
/* *{transition-duration: 0ms !important; animation-duration: 0ms !important; } */
- animation-timing-function: step-start !important;
- transition-timing-function: step-start !important;
*{scroll-behavior:auto !important; }
.floating-header {transition: none !important}
.floating-header header.navbar {transition: none !important}
.hover-zoom-end {display: none !important; }
.card-overlay {transition: opacity 2s !important; }
iframe.patreon-widget { display: none; }
a.ui.card:hover {
transform: none !important;
}
The 1st fix broke something, so I disabled it. The other fixes don't block what they're supposed to.
Actual results:
-
I stopped blocking Youtube thumbnails, they started zooming, I got a nasty migraine.
-
I checked in the inspector, got the attached screenshot of the following code:
transition: opacity 0.25s ease-in-out;
transition-property: opacity;
transition-duration: 0.25s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
Expected results:
In the interest of user safety and accessibility, user css, especially !important user css, should override site css.
This goes back to at least 2017, probably from the beginning. I'm too sick to continue Mozregression and know it can't run older builds.
|
||
Comment 1•3 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::CSS Transitions and Animations' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 2•3 years ago
|
||
Pretty sure this is working as intended. !important on userContent.css overrides the site, chances are that you're missing a selector or so? The attached screenshot shows an element with #thumbnail-container.ytd-video-preview, and I don't see what rule of yours would match it (and thus override it).
transition-timing-function: step-start !important;
was supposed to.
I also asked on Reddit and got working css. I can't read Mozilla's documentation, or most others, since non-scrolling sidebars give me migraines.
Description
•