Overlay Menu does not display in mobile preview when editing or viewing on iOS devices

[mgozdis]

Quick summary

Setting the overlay menu to Mobile only in various FSE themes, including Hevor, displays no overlay menu in mobile preview and no overlay menu at all on the frontend on iOS devices. Text links are displayed at all times regardless of the overlay menu setting on iOS devices. Reproducible on Simple and AT sites. Interaction: 7686104-zd-a8c

A workaround is deactivate Gutenberg.

Steps to reproduce

1. Create a new site
2. Activate Hevor theme (Not Hever)
3. Edit the Index template and check that the Navigation block has the overlay menu set to Mobile only
4. Change preview in Site Editor to Mobile preview and see the overlay menu does not display:
5. View the live site on any iOS device in any browser and see that the overlay menu also does not display

What you expected to happen

The overlay menu should display in mobile preview and on iOS devices when set to display on mobile.

What actually happened

The overlay menu does not display in mobile preview or on iOS devices. It seems to display fine outside of the editor when scaling on desktop or checking on non-iOS mobile devices.

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

For iOS devices while testing on the frontend, we tested with an ancient iPhone 6 in Safari and Brave as well as an iPhone 13 Pro with Safari 16 and latest version of Chrome.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 7686104-zen
• 7706095-zen
• 7711331-zen
• 7712442-zen
• 7686541-zen
• 7738849-zen
• 7742664-zen
• 7754685-zen
• 8605069-zen
• 8783752-zen

[filipanoscampos]

📌 REPRODUCTION RESULTS

Replicated partially on Simple and Atomic.
Not replicated on self-hosted.

📌 FINDINGS

The menu works on iOS for me, on my live test sites.
On my end, the issue is only affecting the live site.

📌 ACTIONS
– Requested author feedback
– Very similar to #87219 (comment) but all the hamburger menus are displaying on my eiOS mobile device.

📌 Message to Author

@mgozdis Thanks for the report!
I can reproduce this in the Editor but not on the live site.

Here is how this looks on my iPhone:

I wonder if you can still reproduce this issue?
Thank you!

[mgozdis]

@filipanoscampos Yes, I can still reproduce on the live site and within the editor on a Simple site. I did not check the user's site reported in interaction as they still have Gutenberg deactivated as a workaround.

It seems to only be reproducible on a physical iOS device. I could not reproduce in emulators or scaling the browser window when viewing the live site.

[filipanoscampos]

Thanks!
I tested this on my own physical iPhone.
Do you have a URL I can check?

[mgozdis]

@filipanoscampos This was my test Simple site that does not display the mobile menu for me. I am testing on a really old iPhone though, but user in my interaction was using an iPhone 13 Pro and seeing the same unless deactivating Gutenberg: https://mgozdis25.wordpress.com/

With Gutenberg deactivated on the user's site, the overlay menu displays on my old iPhone, but it doesn't open, which is similar to other old bug reports I've seen and likely just not compatible with a very old iPhone.

[jp-imagines]

Ran into another report of this in 7706095-zd-a8c

• Menu doesn't reduce to the overlay style in the editor when using the mobile preview option. User and I replicated on Macbooks, and user also replicated from a Windows PC.
• On the live site itself, the mobile overlay menu does display (including on my Android phone, another HE's iPhone, and on my Macbook either by reducing the browser window width or using a mobile inspector preview).

[rickmgithub]

WHAT I FOUND:

• I can replicate the mobile menu not appearing in mobile preview in the editor but it appears on iOS devices for me

WHAT I DID:
On the basis that it's not working in the editor preview this in itself is a bug so marking as such and marking as triaged

[filipanoscampos]

Thank you both so much, I was able to reproduce this on an iPhone 7 with iOS 15.8 on Safari and Chrome.

📌 Update
Closed the other report in favor of this one.

[cuemarie]

Encountered here as well: 7711331-zen

[mgozdis]

Additional report here: 7712442-zd-a8c
User deactivated Gutenberg as a workaround since it was not working on frontend with physical device. They wouldn't specify iPhone model or iOS version.

[pauljacobson]

Adding another instance of this issue: 7686541-zen

[mgozdis]

Another report here 7738849-zd-a8c

[renata-franco]

Got a chat with a user having the same issue: 7742664-zen.

[mgozdis]

Additional report here with Assembler theme: 7754685-zd-a8c

[lsl]

Not able to replicate this (no iOS device handy), please pick this up for debug if you can.

• There have been similar core issues in the past: Navigation Block: Block patterns with overlayMenu set to always do not appear correctly by default WordPress/gutenberg#36670.
• Navigation block code here https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/navigation/edit/index.js.
• It doesn't look like there would be any styling in Hevor theme causing this fbhepr%2Skers%2Sjcpbz%2Qcerzvhz%2Qgurzrf%2Suribe%2Sfglyr.pff%3Se%3Q1227o6r1-og
• It's possible we just need to update the theme template with newer block output fbhepr%2Skers%2Sjcpbz%2Qcerzvhz%2Qgurzrf%2Suribe%2Scnegf%2Surnqre.ugzy%3Se%3Q6ppopnsq%2328-og

[sbathompson-he]

This seems similar and is only happening on this user's mobile view: 8605069-zd-a8c

Here are the videos they supplied:

https://github.com/user-attachments/assets/33744643-6e6e-4406-b0e1-ee0d45464d63

[miksansegundo]

There are different bugs being reported in this issue.

The good news is none of them are reproducible using the latest Gutenberg version with the latest Safari version.

Tested with:

• Safari 17.2 and 17.5
• Gutenberg 18.9.0 and 19.0.0
• Themes Hevor and Assembler

These bugs are browser-specific, not theme-specific. If some are still reproducible, please check the browser or operating system version.

For optimal viewing and security, WordPress.com recommends using an up-to-date version, which generally means the latest two versions. See https://wordpress.com/support/browser-issues/#supported-browsers

Unfortunately, old Safari browser versions could still have these bugs. See the description in #87290 (comment)

Note that Safari browser is tied to the iOS or MacOS versions. Meaning that users must update their device operating system to get the up-to-date Safari version. It's also unfortunate that Apple does not allow some very old macBooks and iPhones to be updated for performance and incompatibility reasons.

Bugs

1. Collapsed navigation (aka hamburger menu) not displayed in the editor mobile preview and the live site, which causes a borked layout.

Not reproduced with latest versions.

BEFORE

Editor mobile preview on Safari desktop	Live site on Safari mobile

AFTER

Editor mobile preview on Safari desktop	Live site on Safari mobile

2. Collapsed navigation button not responsive to clicks or touch events

Not reproduced with latest versions.

Editor mobile preview on Safari desktop	Live site on Safari desktop	Live site on Safari mobile

Please, feel free ask me questions and request help debugging similar issues.

I believe we can lower the priority as in #87290 (comment) cc: @inaikem

[nazilya06]

Another report: 8783752-zd-a8c
Twenty Twenty-Four theme