'Devextreme: Drawer doesn't work on mobile phone

Devextreme is a great framework.

Sadly to say, but I noticed a very strange behavior of Drawer on Mobile device (I use vue). You simply can not open it! You are pressing the toggle button but no result. Details are bellow.

I found it out in my big app. But it is the same thing happening even with your template. You can probably recreate this bug yourself. It shows up only on mobile devices (not pc, not pads) To do it:

1.Generate a template:

 "npx -p devextreme-cli devextreme new vue-app app-name --version=3"

OR for vue2.js

 "npx -p devextreme-cli devextreme new vue-app app-name --version=2"

2.Go into "app-name" folder. Install dependencies. Then run:

"npm run serve"

All is ok.

You see a link to open in a browser, like "http://192.168.1.101:8080". I open it on my i-phone or on old meizo, either in Safary or in Chrome. And what I see was the following:

a) a normal home page with a header. OK

b) I press a stripped button (in a header) which intended to open a navigation menu (DxDrawer)

c) the screen goes darker but no menu shown (i guess it is either hidden or out of the screen?) NOT OK

Button is pressed. No menu. Dark screen

d) I turn the phone to the horizontal position (size changed, orientation changed) and the menu becomes immediately visible normally. I turn it back vertically and the navigation menu starts working as it should.

Thus just after turning it left and right it fixes itself (don't say me to ask my clients to do so :)

You can see this bug only on the first load. If you revisit the link (second, third time…), then probably cached content will work normally as intended. To repeat the bug you need to clean browser history and reopen the link again.

I'v repeated noticing the bug on many devices in dev and prod on cloud and locally, many mobile phones :)

I tried to fix it by firing events and refreshing the elements, but alas… Hope you can help me and improve this famous product by bug fixing.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source