I’m building a custom website using Angular, and ran into a strange problem on Safari that I can’t figure out. I’m using a CSS breakpoint to display a typical mobile “hamburger” site menu. On Safari, when I tap to open the menu, then select a different page, it seems that all touch gestures on my site get disabled. I can no longer open the menu again, nor can I tap on any of the interactive elements across the entire site. This problem only happens on Safari on iOS – it does not happen in Safari on desktop, it does not happen in the Responsive Design Mode, it does not happen on the iPhone simulator on desktop, and it does not happen on any other browser on mobile or desktop other than Safari, making it really difficult to debug the issue.
Here’s a link to the site:
www.everythinggood.studio
To recreate the issue:
- Launch the site on Safari on iOS
- Tap on the smiley face icon in the upper-right corner, this opens the site menu.
- Tap on “Work” or any other menu item.
- Try to tap again on the smiley face to open the menu, or tap on any of the projects in the Work section.
- Notice that tap gestures have totally stopped working 🙁
- However, if you then double-tap anywhere on the screen, then tap again, touch gestures start working again.
Any idea what could be going on here, or how to even start to debug this? Thanks.
