Sidebar Backdrop does not disappear on mobile

[morganphilo]

I am using Core UI Pro and have implemented the Sidebar in my app, but on mobile when I close the sidebar the backdrop remains.

Same issue exists on the documentation site:

Go to https://coreui.io/vue/docs/components/sidebar.html on mobile. Expand the menu Tap the backdrop to hide the menu

Present on Android, Firefox and Chrome

[DGollings]

same here, although it was said to be fixed in v4.1.1 but I'm not entirely sure if and how I could downgrade coreui and coreui/vue to that version

[mrholek]

What version of @coreui/vue, and @coreui/coreui, do you use?

[morganphilo]

@coreui/coreui 4.2.0 @coreui/vue 4.3.0

[morganphilo]

I see it was fixed in v4.1.1 here as identified by @DGollings but I have that version and it persists.

[mrholek]

@morganphilo on which mobile device and browser do you have this issue?

[morganphilo]

Backdrop persists: Pixel 6 Firefox and Chrome Pixel 4XL Firefox and Chrome

Backdrop Works IPhone 7+ Safari

[DGollings]

Interesting, for me it's a pixel 6 pro with Firefox

On Thu, Jul 28, 2022, at 9:06 PM, Morgan Philo wrote:

Backdrop persists: Pixel 6 Firefox and Chrome Pixel 4XL Firefox and Chrome

Backdrop Works IPhone Safari

— Reply to this email directly, view it on GitHub https://github.com/coreui/coreui-vue/issues/220#issuecomment-1198527646, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAPQJN24YVS6X3KVHH5MDXTVWLK5HANCNFSM53NENDKQ. You are receiving this because you were mentioned.Message ID: @.***>

[morganphilo]

Ah interesting. I dusted off my old Galaxy S5 with Chrome and the backdrop goes away as expected. Must be a Pixel issue.

[dang-cb]

I experience the issue on an iPhone 13 Pro too, when in portrait mode. If the menu is expanded when in landscape mode, it clears as expected.

I wonder if certain media widths are causing this? Dan

[coderkoala]

This hasn't been addressed at all, anything under 768px viewport gets stuck on the backdrop because the event's not firing on sidebar dismissal, thus the mutation never fires for changing the value responsible for maintaining visibility.

@mrholek easiest way to reproduce it is to simply use the mobile viewport in dev tools, activating the sidenav, then simply tap any item that pushes a different route view. The backdrop will now persist, and there's no way to take care of it.

I've jumped through all sorts of hoops to fix it, ranging from visibility: hidden, to manually triggering an update through mutations on each route push event through a plugin. Overall, it's been a major headache since coreui 4's arrived.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions