Sidebar does not appear on Apple devices

[Romain]

Hello everyone,
I have a problem with my sidebar on Apple tablets and mobiles (this bug has only been noticed on these devices).

When the user clicks on the hamburger menu, the icon disappears but the menu does not appear anywhere.

Here is how it works:
The icon and the menu are linked to a variable “show_mobile_navbar”, when we click on the hamburger the icon disappears the menu appears.

It works perfectly on Android tablets and mobiles. The problem does not come from Safari (we tested an iPad on Chrome and Firefox)

I noticed that if I change the menu from “fixed” to “normal” it works… but I feel like I can’t manage my design in “normal”. Here in “normal” :

In “absolute” the menu does not appear at all.

The z-index is 200.

Anyone have an idea? Thank you for your help and have a nice day!

[Agustin_Carozo]

Hi Romain

Maybe this has something to do with the screen size of ipads?
Normally ipads have a bigger resolution than regular tablets.
And if you are manually placing the menu it might be somewhere outside your visual range.

Is your sidebar the ready to use element “sidemenu”?

Can you share screenshots of your ipad?

[Romain]

Hello Agustin,
Thank you for your response!

Whether on iPad or iPhone, the problem is the same. Here are screens on iPhone 13. We simply see the hamburger icon disappear when we click on it (which is the expected operation) but the menu does not appear.

On all Android mobiles the menu is displayed normally.

I’m not sure it’s the “ready to use element “sidemenu”” because it’s not me who developed this part…

The position of the navbar is “normal” inside my “top bar”. Here is a capture.

The sidebar menu which is supposed to open when clicking on the icon is “fixed” as you can see here:

[Romain]

Hello everyone !
I managed to resolve the issue… here’s what it was (if this helps anyone).

Apparently: “The fact that your sidebar is not displayed on any Apple mobile device, even with Chrome or Firefox (which use WebKit on iOS), but works on Android and desktop (Mac and PC), indicates a bug specific to iOS Mobile Safari/WebKit Mobile.”

So I looked for a solution in this sense. In the end I simply had to change the container of my hamburger menu (in red) to “block” and not to “flex”. I don’t know why it adapted properly under Android, but under iOS the menu opened inside this container without the size adapting.

Sorry if it’s not clear, here’s a screenshot. See you soon !

[Agustin_Carozo]

Thank you for updating us on the resolution Romain!