Skip to content

Mobile menu toggle unreliable on real iPhone (likely Page Transitions AJAX layer; unreproduced in emulation) #529

Description

@georgeolaru

Summary

Customer reports that the Nova Blocks mobile menu does not reliably open on a single tap on iPhone 16 Pro Max (both Safari and Chrome). Behavior is intermittent: sometimes the menu opens; sometimes only after several taps; sometimes the menu appears, jumps, and disappears. Not reproduced in Playwright WebKit emulation — opening this for a real-device reproduction pass.

Reproduction status

  • Not reproduced in Playwright WebKit iPhone 15 Pro Max (430×739). 3/3 scripted taps opened the menu correctly (#nova-menu-toggle.checked === true) in both the demo and a real Mies LT customer install. See attempt screenshots below — each one captured after a fresh tap-open cycle:

  • Reported by a Mies LT customer across two separate tickets (internal HelpScout 3295681611 and 3296817099):

    "The menu does not show up without several times ticking on the mobile screen."
    "Sometimes the menu is not appearing at all, it jumps up and down and does not show up."

Hypothesis

The menu uses a CSS checkbox-hack: a <label for="nova-menu-toggle"> toggles a hidden <input type="checkbox">. On iOS Safari this pattern is known to interact poorly with:

  • 300ms click delay on elements without touch-action: manipulation
  • overlapping event targets (e.g. the label shares pixels with a page-transition overlay or sticky header layer)
  • the Page Transitions feature intercepting pointer events during the in/out animation

The customer site has Page Transitions enabled (has-page-transitions--border_iris). Because Page Transitions uses AJAX loading rather than full navigation, the transition overlay/border element remains in the DOM throughout the session and its event bindings are re-attached against the injected markup on every navigation. Any mismatch between the toggle's event listeners and the transition overlay's pointer-events state could swallow the first tap on the new "page" — especially if the destination page injects its header markup after the overlay has already captured pointer events. Page Transitions is the primary suspect for every "menu fails to open on first tap" report we've seen.

Next step

  • Reproduce first with Page Transitions disabled via Tweak Board, to confirm the AJAX layer is the cause. If the menu behaves reliably with Page Transitions off, this issue collapses into a Page Transitions bug rather than a menu-toggle bug.
  • Attach Mobile Safari Web Inspector to a real iPhone running Mies LT with Page Transitions enabled
  • Trace which pointer/click events are dispatched on the label vs. swallowed by the transition overlay
  • Verify whether the menu toggle's event listeners survive AJAX content swap, or whether they need to be re-bound on every transition complete
  • If Page Transitions is the culprit, options: delay overlay attach/detach past the first user gesture, rebind the toggle listeners on transition-complete, add touch-action: manipulation to the label to eliminate the 300ms iOS click delay

Recommended customer workaround

Disable Page Transitions in Appearance → Customize → Tweak Board. If the menu becomes reliable with transitions off, that confirms the diagnosis.

Customer reference

HelpScout tickets 3295681611 and 3296817099. Customer device: iPhone 16 Pro Max, tested in both Safari and Chrome.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions