Twenty Twenty: Mobile menu and search bar not expanding

[connorocampo]

The menu and search bar doesn't expand when clicked on my iPhone 7.

Browsers used: Chrome, Firefox, Safari

Whats weird though is that on my desktop, when in inspector mode with mobile view on, the mobile menus work.

[macmanx]

I'm seeing this as well using Safari under my iPhone 11 Pro running iOS 13.2.3, and under my iPad Pro 11-inch (with the vertical orientation) running iPadOS 13.2.3.

It usually starts working after a re-load, but definitely not on the first load.

You can reproduce this at ​https://wp-themes.com/twentytwenty/

[connorocampo]

Replying to macmanx:

I'm seeing this as well using Safari under my iPhone 11 Pro running iOS 13.2.3, and under my iPad Pro 11-inch (with the vertical orientation) running iPadOS 13.2.3.

It usually starts working after a re-load, but definitely not on the first load.

You can reproduce this at ​https://wp-themes.com/twentytwenty/

Hey macmanx,

I have a website using this theme. The menu and search buttons used to worked on mobile when I first activated the theme but after adding some content and plugins, they no longer work on mobile.

Update: I've deactivated all my plugins to see if they were the problem. These appear to be the offending plugins:

​https://wordpress.org/plugins/pwa-for-wp/ (not working on Firefox mobile app)
​https://wordpress.org/plugins/wp-fastest-cache/ (not working on Firefox, Chrome, or Safari mobile app)

After deactivating these two plugins, the mobile menu and search buttons function correctly.

[macmanx]

Interesting, so a caching issue. That's going to be difficult.

I have a built-in cache with my hosting provider, I'm lots of others do, so it would be good if there was a theme-based way to get around that.

[Ipstenu]

Normally when we debug these things, it turns out to be separate JS/CSS being loaded when on mobile vs when on desktop, and the cache is (logically) caching whatever hits it first. This doesn't happen when I make my screen smaller on desktop, so at a GUESS, this has to do with the feature to allow a totally separate menu on mobile.

Is this a site with that configured? If not, can we try that and see what happens?

[macmanx]

Is this a site with that configured?

​https://macmanx.com/ is affected. It's operating under DreamPress's built-in Varnish cache, which I don't have much control over.

​https://wp-themes.com/twentytwenty/ also appears to be affected, but I don't know much about how caching is handled over there.

[acosmin]

This might be related to https://core.trac.wordpress.org/ticket/48601#comment:13

[macmanx]

Thanks @acosmin !

I can confirm that the load-touch-detection-when-dom-is-ready.diff patch over in #48601

Tested in Safari 13.0.3, Firefox 70.0.1, and Safari under iOS 13.2.3.