? J4 Issue ?
avatar ReLater
ReLater
26 Oct 2020

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?

avatar ReLater ReLater - open - 26 Oct 2020
avatar joomla-cms-bot joomla-cms-bot - change - 26 Oct 2020
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 26 Oct 2020
avatar ReLater ReLater - change - 26 Oct 2020
The description was changed
avatar ReLater ReLater - edited - 26 Oct 2020
avatar richard67
richard67 - comment - 26 Oct 2020

@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.

avatar richard67
richard67 - comment - 26 Oct 2020

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.

avatar SharkyKZ
SharkyKZ - comment - 26 Oct 2020

Sounds like #31106 if you have animations disabled.

avatar ReLater
ReLater - comment - 26 Oct 2020

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.

26-10-_2020_22-23-17

avatar ReLater
ReLater - comment - 26 Oct 2020

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

avatar ReLater
ReLater - comment - 26 Oct 2020

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

opened new issue: #31244

avatar ReLater
ReLater - comment - 26 Oct 2020

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;
} }
avatar ReLater ReLater - change - 26 Oct 2020
Title
[4] Atum. Sidebar menu. Only 1 action possible.
[4] Atum. Sidebar menu. Only 1 expand/collapse action possible.
avatar ReLater ReLater - edited - 26 Oct 2020
avatar ReLater ReLater - change - 26 Oct 2020
The description was changed
avatar ReLater ReLater - edited - 26 Oct 2020
avatar ReLater ReLater - change - 26 Oct 2020
Title
[4] Atum. Sidebar menu. Only 1 expand/collapse action possible.
[4] Atum. Sidebar menu. Only 1 expand/collapse action possible when animation disabled in Windows 10 OS.
avatar ReLater ReLater - edited - 26 Oct 2020
avatar ReLater
ReLater - comment - 26 Oct 2020

@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.

avatar jwaisner jwaisner - change - 2 Nov 2020
Labels Added: ? J4 Issue
avatar jwaisner jwaisner - labeled - 2 Nov 2020
avatar jwaisner jwaisner - labeled - 2 Nov 2020
avatar richard67
richard67 - comment - 17 Feb 2021

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

avatar richard67
richard67 - comment - 17 Feb 2021

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

avatar ciar4n
ciar4n - comment - 17 Feb 2021

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.

// 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;
}
}

avatar richard67
richard67 - comment - 17 Feb 2021

@ciar4n Do you wanna make a PR?

avatar xjdfhbv
xjdfhbv - comment - 18 Feb 2021

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.

avatar ciar4n
ciar4n - comment - 18 Feb 2021

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

avatar richard67
richard67 - comment - 18 Feb 2021
avatar brianteeman
brianteeman - comment - 11 Mar 2021

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;
	}
}
avatar Quy Quy - change - 8 Apr 2021
Status New Closed
Closed_Date 0000-00-00 00:00:00 2021-04-08 22:41:55
Closed_By Quy
avatar Quy Quy - close - 8 Apr 2021
avatar Quy
Quy - comment - 8 Apr 2021

Fixed in #33069

Add a Comment

Login with GitHub to post a comment