First Mouse Click Interaction not working in mobile

Design help Animations & Interactions
1

Not sure if it’s a bug or if I’m just missing something.

The problem is I can’t seem to get the first mouse click trigger to activate the lottie ‘mobile hamburger menu’ on my phone, however it does works in mobile preview in weblfow and on the desktop sized down to mobile size, yet the second mouse click trigger works every time on the phone, I’ve adjusted positions and indexes to make sure the hamburger button is on top. Any help would be fantastic.

Tested with iOS 13.1.2 on iPhone 8 plus with Safari, Chrome and Firefox mobile browsers.

Here is my public share link:
https://preview.webflow.com/preview/pizzafresh-v2?utm_medium=preview_link&utm_source=designer&utm_content=pizzafresh-v2&preview=87b05a8cc3eae03000c20c0a850f6612&mode=preview

https://pizzafresh-v2.webflow.io/

1 Like
2

Hello @Tom_Alexander,

Wellcome to the forum. Did you fix your issue? Because I tested it on my iPhone Xr and it worked fine. The first click starts the lottie animation until the x shows up and the menu opens up, and the second click closes the menu and the x goes back to the hamburger menu. Try to reload your designer and test again. I hope this helps.

3

Hi Pablo,

Thanks for testing that for me. I haven’t been able to fix the issue yet. I’ve tried reloading the designer and a few adjustments here and there, and I can’t seem to make that first mouse interaction work on my phone.

I’ll try to do some quick testing today on some other models and brands of phones just in case and report back.

4

I’m having the same issue, only I’m using an interaction vs Lottie. It was working prior to my ios13 upgrade. @rileyrichter have you heard of this yet?

5

Having the same issue here. Did you ever find a fix?

The lottie plays correctly, but only on the second click on my iPhone XR. So every other click it works. Very strange.

6

Hey! I think it’s some sort of iPhone iOS issue. I was particularly trying to do a navigation animation and was able to fix it by using the navbar element. You can dig in here: https://webflow.com/website/Animated-Hamburger-Menu

Hope this helps you out. Not sure if there’s a fix for non-nav animations on newer iPhones.

7

Same issue here. Anybody an idea on how to fix this?

8

Hey all, I’m having this issue as well.

  • Hamburger menu appears at mobile landscape and below
  • Clicking it triggers a pop up menu to display
  • This works fine when previewing via my laptop
  • When I preview on my iPhone (iOS 15.2.1), however, it doesn’t work
  • Update: Can confirm that it also does not work on Android, so not iPhone specific.

I tried swapping my custom built nav out for the Webflow stock “Navbar” element (as suggested by @parker ), but this didn’t work, either.

Wondering if this is just an issue with preview and won’t be an issue if the site is live? Kinda doubt that?

Apologies in advnace for the undoubtedly noob-ish coding of the site… I’m not a developer :wink:

https://preview.webflow.com/preview/better-f70eca?utm_medium=preview_link&utm_source=designer&utm_content=better-f70eca&preview=f7e32911f6390b2f69f06c4d117dee67&workflow=preview