Issue with mobile nav on Safari iOS 13

Weird issue with text interactions on nav menu in Safari and Chrome on iOS 13. It looks as if the trigger is being complete ignored from tap. I have a tested this on an iPhone 7 with both browsers and it works fine. And it works with Chrome on Desktop (MacOS). Any direction would be helpful. Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/snapcreative-net?utm_medium=preview_link&utm_source=designer&utm_content=snapcreative-net&preview=1eab53078825328366bb29cf627b243c&pageId=5d7a629bc8ca6ae70e17ad10&mode=preview
(how to share your site Read-Only link)

I’ve reenabled this so it can be viewed. Had to disable to launch the site. I can’t figure it out. It works fine on all browsers running iOS 12, but in iOS 13 it refuses to fire the interaction from the initial state. I’m at a loss on this one.

And by the way, the type will be pretty good sized when you review. We set the base font at 10px in custom code for easier math. Sorry the text is so big. Thanks!

Whats the actual website URL so I can check?

Checking the actual URL won’t help because the site is live and isn’t working properly on publish. I recreated a version of it without any modifications in another project. Just tested it in Safari iOS 12 and then iOS 13. Same issue. Link is below. This one doesn’t have the opacity set, but the issue is the same.

https://preview.webflow.com/preview/sc-playground?utm_medium=preview_link&utm_source=designer&utm_content=sc-playground&preview=17dd2f09fce05e2bbee737e48eb68e16&mode=preview

No the URL does help lol. I am asking because I have iOS13 and I would like to just experience the issue for myself.

Here’s the new one: https://sc-playground.webflow.io

Ok… cool… see now I can see what you mean. The navlinks are outside of the menu wrapper until you tap the menu again and then it’s correct

Have you tried setting the Nav Menu's overflow to none?

Correct. That is the issue though. Tapping should move things back. The issue (as far as I can see) is that on iOS 13, the first tap isn’t triggering the interaction from its initial state.

Take a look at it on and iOS 12 (or earlier) or on desktop to see how it’s supposed to work and seems to be working on every other browser except ones in iOS 13.

@matthewpmunger Tagging you so you can maybe test it on your end and if it is an issue with iOS 13, maybe you can bring it up to the dev department.

I have no way of testing it on iOS 12 myself cause I upgraded already. I have confirmed though that on my end I experienced the same issue.

Try a desktop browser. Works in Chrome and Safari on MacOS and IE 11 and Edge 18 exactly how it’s supposed to.

HI @snappercridge, thanks for reporting the trouble on iOS13. I have been able to also view the strange rendering behavior for iOS13.

The same code runs for other browsers so there might be something new or bugged in iOS 13 that has changed, I have reached out to our team to check this further.

When there is more info I will post an update.

1 Like

Thanks @cyberdave. I’ve tested it in Windows 10 on IE11, M-Edge v18, macOS in latest Safari, Firefox and Chrome and in Safari and Chrome in iOS 12. Each of those worked great. I also noticed that if change the interaction to fire on Navbar Opens instead of Menu Tap, it seems to work properly even in the browsers on iOS 13. Just some more info. I’ll keep watch on any updates here. Thanks again!

Hi @snappercridge, thank you for the report! We’ve been noticing some odd behavior with iOS 13 in general. Like you mentioned, I was able to fix this by using the Navbar Opens trigger, which is ideal when working with a Navbar open/close state.

Just to confirm, here is an updated preview link with the working trigger:
https://preview.webflow.com/preview/navbar-ios13-bug?utm_medium=preview_link&utm_source=dashboard&utm_content=navbar-ios13-bug&preview=e6e907c1cd0e4efe7389f887c997b2f2&mode=preview

And the URL for mobile testing: https://navbar-ios13-bug.webflow.io/

Does this accomplish what you originally set out to do?

This was the decision, I decided to go with. Much better solution in the end anyway. Still would like to know why it’s not working the other way though. Hopefully someone will be a able to figure that out. Thanks for the update.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.