Make WordPress Core

Opened 3 years ago

Closed 2 years ago

#54174 closed enhancement (fixed)

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

Reported by: gregoiresailland's profile gregoiresailland Owned by: peterwilsoncc's profile peterwilsoncc
Milestone: 6.0 Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-patch needs-testing
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 (2)

54174.patch (168.8 KB) - added by sabernhardt 3 years ago.
54174.1.patch (10.6 KB) - added by sabernhardt 2 years ago.
switching social link transition to SVG instead of a element

Download all attachments as: .zip

Change History (12)

#1 @sabernhardt
3 years 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
3 years 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)') {

sheet.removeRule (i);




Version 0, edited 3 years ago by gregoiresailland (next)

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

3 years ago

#4 @ryokuhi
3 years 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 years ago

#5 @sabernhardt
3 years 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.

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

3 years ago

#7 @sabernhardt
3 years ago

  • Keywords needs-refresh added; dev-feedback 2nd-opinion removed
  • Milestone changed from Awaiting Review to 6.0

I'll refresh the patch, with the social link transition on the SVG (not the a element).

2 years ago

switching social link transition to SVG instead of a element

#8 @sabernhardt
2 years ago

  • Keywords needs-testing added; needs-refresh removed

The patch contains the SCSS and compiled stylesheets (no map files or unrelated IE11 stylesheet improvements).

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

2 years ago

#10 @peterwilsoncc
2 years ago

  • Owner set to peterwilsoncc
  • Resolution set to fixed
  • Status changed from new to closed

In 52835:

Twenty Twenty-One: Reverse logic for prefers-reduced-motion media query.

Reverse the logic of the prefers-reduced-motion to enable transitions based on no-preference rather than disable them based on the reduce preference. This removes the need to disable transitions with the ! important tag and unintended interactions with plugins as a result.

Props gregoiresailland, sabernhardt, ryokuhi.
Fixes #54174.

Note: See TracTickets for help on using tickets.