Make WordPress Core

Opened 4 weeks ago

Last modified 3 weeks ago

#54174 new enhancement

Twenty Twenty-One: @media (prefers-reduced-motion) in sass/07-utilities/a11y.scss breaks some plugins

Reported by: gregoiresailland Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: dev-feedback has-patch 2nd-opinion
Focuses: ui, accessibility, css Cc:

Description (last modified by sabernhardt)

As a fix it could be good to register it as a separate script than in the main style.css
Like that it could be deregistered via wp_deregister_script or wp_dequeue_script function
I have for example a plugin (Gallery Lightbox Lite) that is not working with gutenberg gallery and Twenty Twenty-One when the OS or browser has the flag prefers-reduced-motion:reduced active.

Or do you have a solution in order to remove the

@media (prefers-reduced-motion) {
	* {
		transition-delay: 0s !important;
		transition-duration: 0s !important;

Some animations are vital to some blocks or plugins and it could be good to can disable this limitation in some child theme without having to recompile and replace all Twenty Twenty-One scss

Thank you for your support :)

Attachments (1)

54174.patch (168.8 KB) - added by sabernhardt 3 weeks ago.

Download all attachments as: .zip

Change History (6)

#1 @sabernhardt
4 weeks ago

  • Component changed from Themes to Bundled Theme
  • Description modified (diff)
  • Version changed from trunk to 5.6

Welcome and thanks for the report!

There are only 4 unique transition properties in the theme's compiled stylesheets. Instead of removing all transitions, these specific styles could be wrapped in
@media (prefers-reduced-motion: no-preference) { }

Google developers article

#2 @gregoiresailland
4 weeks ago

I found a way to disable it with javascript:

	var styleTag = document.getElementById("twenty-twenty-one-style-css");
	var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;

	if (sheet.cssRules) { // all browsers, except IE before version 9
		for (var i=0; i<sheet.cssRules.length; i++) {
			if (sheet.cssRules[i].conditionText === '(prefers-reduced-motion)') {
				sheet.deleteRule (i);
	else{  // Internet Explorer before version 9
		for (var i=0; i<sheet.rules.length; i++) {
			if (sheet.rules[i].conditionText === '(prefers-reduced-motion)') {
				// console.log(sheet.cssRules[i]);
				sheet.removeRule (i);
Last edited 4 weeks ago by sabernhardt (previous) (diff)

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.

4 weeks ago

#4 @ryokuhi
4 weeks ago

Hello @gregoiresailland, and welcome again on Trac.
We discussed this ticket today during the weekly Accessibility Team's bug-scrub.
As the Twenty Twenty-One theme was built taking accessibility into great consideration, we're a bit reluctant to make changes to its accessibility features.
Still, there's maybe some space for possible improvements to the CSS rule.
We'd like to hear @poena's opinion on the topic, as she's been involved with the theme development since the beginning.

3 weeks ago

#5 @sabernhardt
3 weeks ago

  • Keywords has-patch 2nd-opinion added; needs-patch removed
  • Severity changed from critical to normal
  • Type changed from defect (bug) to enhancement

Plugins need to account for users' motion preferences, too, so this is not a bug.

However, Twenty Twenty-One could be less aggressive about the transition property. I uploaded a patch for consideration.

Note: See TracTickets for help on using tickets.