[4] Atum. Sidebar menu. Only 1 expand/collapse action possible when animation disabled in Windows 10 OS.

[ReLater]

Steps to reproduce the issue

Supplement after comment #31242 (comment):
DIsable animations in your OS. Windows 10 in my case.

• I see this issue on XAMPP 7.3 and on an online installation.

• First one uses a custom sidebar menu (preset menu). Latter one the preinstalled sidebar menu.

• Both are updated nightly 4 builds.

• When I click on a first level menu item (e.g. "Content"), area with arrow-right icon, to expand the submenu items I can't close the expanded part with an additional click afterwards.

• And I can't open another first level menu item (e.g. "Menus") with click.

• Menu actions (expand/collapse) are frozen.

• No JavaScript errors displayed.

• As far as I see all relevant JS libraries/files are loaded.

• I have already overwritten all core files on the XAMPP version. No change.

• Browser cache. No change.

• Browsers: Current edge/chromium, current Firefox.

Can somebody confirm the issue?

[richard67]

@ReLater What do you mean with "updated nightly 4 builds"? Updated from 3.10-dev or alpha to a 4.0 nightly? Or updated a previous 4.0 nightly to a later 4.0 nightly? You know that the latter is not supported because we might have to (and have) changed existing 4.0 update SQL scripts which have not been released yet.

You can see that in the release announcements of the 4.0 Beta versions, e.g. the last one https://www.joomla.org/announcements/release-news/5822-joomla-4-0-0-beta4-and-joomla-3-10-alpha2.html, in section "How can I help Joomla 4 development?":

To make the life of testers (and early adopters) easier, updating is possible from the Beta version to the next Beta, RC or stable version (we will remain strict in updating the deleted files and modifying the SQL changes).

As you can see, this doesn't include updates from nightly to nightly, because if we would do that we would have hundreds of 4.0 update SQL script meanwhile.

[richard67]

P.S. And no, I neither can reproduce that nor have I ever observed that. It really seems your database has missed updates due to the reaon I have stated in my previous comment.

[SharkyKZ]

Sounds like #31106 if you have animations disabled.

[ReLater]

What do you mean with "updated nightly 4 builds"? Updated from 3.10-dev or alpha to a 4.0 nightly? Or updated a previous 4.0 nightly to a later 4.0 nightly?

One is 3.9 > 3.10 > 4.0 nightly (beta5) > and so on

The other is 4.0 nightly (don't know) > and so on

Sounds like #31106 if you have animations disabled.

Yes, disabled with lots of other annoying tralala (for old eyes). Windows 10.

Yes, you're right. "Animation off" is the reason for my find.

[ReLater]

Could you please comment @brianteeman ?
I'm not willing to change my OS settings just for Joomla 4 ;-)

[ReLater]

Just BTW(!) (doesn't fix). I'm irritated that ...

opened new issue: #31244

[ReLater]

Just an ugly workaround for the moment:

In a atum/css/user.css

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    transition-duration: 0.1ms !important;
} }

[ReLater]

@richard67

Issue confirmed with fresh installation of nightly Monday, 26 October 2020 22:56:42 UTC

XAMPP 7.3
Animations deactivated in Winsows 10 settings.

[richard67]

@ciar4n As it's a CSS thing: Do you have an idea how we can fix this?

[richard67]

See also #32445 , a newer issue which I've just closed as duplicate to this one here, but with a more brief description.

[ciar4n]

It appears the metismenu script used for the sidebar menu doesnt play nice if transition-duration is set to 0s. As pointed out by @ReLater, a transition-duration of anything else works fine.

Changing the following to transition-duration: 0.000000001s !important; and there isnt a problem :/. Obviously not exactly ideal.

joomla-cms/administrator/templates/atum/scss/template.scss

Lines 73 to 84 in 05278fa

	// Forcing reduced motion when set in the user OS
	@media (prefers-reduced-motion: reduce) {
	*, ::before, ::after {
	background-attachment: initial !important;
	transition-delay: 0s !important;
	transition-duration: 0s !important;
	animation-duration: 1ms !important;
	animation-delay: -1ms !important;
	animation-iteration-count: 1 !important;
	scroll-behavior: auto !important;
	}
	}

[richard67]

@ciar4n Do you wanna make a PR?

[xjdfhbv]

I spent hours searching for this issue (resulting in #32445) but didn't find this one, which was here all the time. Sorry for creating the duplicate, but I hope that between the two, the issue will be easier to find now.

The 0.000000001s solution is an improvement but now I see the component icons briefly blink as I switch between sub-menu items. It would be nice if that can be fixed.

Can I please remind all developers that prefers-reduced-motion is incredibly important to some people. You need to actually test it, not just add a media query that kills all transitions. If it was that simple, the browsers could do it without any CSS. The best solution is not always simply to kill all transitions. It tends to be large areas of motion that cause problems for affected people, but things like a .2s transition of a field border colour is actually preferable to no transition at all. Sorry for the lecture but I guess it's difficult to understand if you aren't affected .. but some day you might be so it's an issue that developers should pay more attention to.

[ciar4n]

@richard67 I've created an issue upstream on the metismenu repo. I guess let's see what comes back there first.

[richard67]

@ciar4n Thanks. onokumus/metismenujs#9

[brianteeman]

Checking webaim.org and I see that they use the following css on their own site

@media (prefers-reduced-motion: reduce) {
	header h2 a img {
		transition-duration: 0.001ms !important;
	}
}

[Quy]

Fixed in #33069