Topic: components depending on transitionend don't work if prefers-reduced-motion is enabled
ikan_nak
priority
asked 1 hour ago
Expected behavior I expect alert autohide, as well as shown.mdb.alert and hidden.mdb.alert to work regardless of whether expects-reduced-motion is enabled.
Actual behavior expects-reduced-motion sets transition to none on fade through a media query, which disables the transitionend event that some components still rely on. This breaks things like autohiding of alerts, as well as the triggers for shown and hidden for alerts, because these rely on the handlers for transitionend to fire so the _isOpen property is properly changed after the opacity transition.
I looked at your javascript code, and it appears you have a function in your mdb/util/index.js page to fire off this transitionend method, but based on my cursory reading of your code this function may not actually be invoked when needed...
For now, I added an updated media query for prefers-reduced-motion that just uses a 0.001s transition, as opposed to no transition at all, but a more permanent fix will need to come from your end. This media query was explained here: https://github.com/jensimmons/cssremedy/issues/11
Resources (screenshots, code snippets etc.)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 8.1.0
- Device: Desktop
- Browser: Edge and Firefox
- OS: Windows 11
- Provided sample code: No
- Provided link: Yes