Zooming elements on support.mozilla.org
Categories
(support.mozilla.org :: General, defect)
Tracking
(Not tracked)
People
(Reporter: erwinm, Unassigned)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:75.0) Gecko/20100101 Firefox/75.0
Steps to reproduce:
I visited https://support.mozilla.org/en-US/ to try to ask for help.
Under "Pick Your Products," I moused over Firefox.
Actual results:
It zoomed on mouseover.
And now I'm busy migraining. Who decided this was approprioate. I know it is standard web design, but it is also zooming animated pain.
<div class="card card--product zoom-on-hover">
Expected results:
It should not zoom on mouseover.
The following css seems to help:
@-moz-document domain("support.mozilla.org") {
- { 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; }
*:hover { transform: none !important; } - { background-image: none ! important }
}
Also the search bar here, and the above css does not fix it:
|
||
Comment 3•5 years ago
|
||
I'm very sorry about this.
We can implement the prefers-reduced-motion CSS feature. Do you have that preference set in Firefox? I believe it should inherit from your OS settings, but if not you can also set it with ui.prefersReducedMotion=1 in about:config
Meanwhile, as an interim fix this css should disable the zoom-in on the search bar:
input:hover {
box-shadow: none !important;
border-color: var(--field-border-color-hover) !important;
}
|
||
Comment 4•5 years ago
|
||
Resetting severity to default of --.
|
|
||
Comment 5•5 years ago
|
||
We've disabled those animations you identified when the "prefers reduced motion" config is set
In Firefox you can set it in any of these ways:
In GTK/GNOME: GNOME Tweaks > General tab (or Appearance, depending on version) > Animations is turned off.
Alternatively, add gtk-enable-animations = false to the [Settings] block of the GTK 3 configuration file.
In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
In Windows 7: Control Panel > Ease of Access > Make the computer easier to see > Turn off all unnecessary animations (when possible).
In macOS: System Preferences > Accessibility > Display > Reduce motion.
In iOS: Settings > General > Accessibility > Reduce Motion.
In Android 9+: Settings > Accessibility > Remove animations.
In about:config: Add a number preference called ui.prefersReducedMotion and set its value to 1. Changes to this preference take effect immediately.
I went though the code to identify any other zooming or sliding transforms, and also disabled them when "prefers reduced motion" is set. Apologies if I missed any, please reopen this bug if I have.
Description
•