Steps to reproduce the issue

On a desktop computer, enable "prefers-reduced-motion" mode on your browser. There are various ways to do that. Google it.

• On the main left menu, click "System".
• Then click "Components". The Components menu opens.
• Then click any component that has sub-menu entries, e.g. Banners, Contacts, News Feeds, or Smart Search. Nothing happens. The sub-menus do not open.
• Click Tags or Multilingual Associations. Items without sub-menu entries work ok.
• Now click Banners or any of the other previously dead items. One item (only) will now open.

There are many other manifestations of the problem and many other ways to reproduce it. The above is just one reliable example.

Expected result

The menu system should be capable of working with prefers-reduced-motion.

Actual result

As described above, the menu is virtually unusable with prefers-reduced-motion.

System information (as much as possible)

Joomla! 4.0.0-beta7 and at least as far back as beta4. The problem occurs in all recent versions of Chrome, Firefox, Safari and Edge.

Additional comments

Removing the "transition-duration:0s!important;" at line 14510 of Atum template.css prevents the problem occurring, although that is not an acceptable solution because the animation is not suppressed.

Changing that line to "transition-duration:0.0001s!important;" also prevents the problem and is a better solution for people who need reduced motion.

Obviously it would be better to find out why the problem occurs with transition-duration:0s and fix that.