Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Responsive hamburger menu not working on mobile safari?

I have been going in circles looking for a solution to a problem I never thought could exist in 2019.

I am busy building a site and made use of a Hamburger menu for smaller screen sizes. Everything looks good in Google Dev tools for multiple devices, but once I do a real world test on my iPhone 5SE the hamburger menus is dead, and the styling of the "Order now!" button is messed up?

Is there an easy way to change the css or JS so that the site can work on mobile ios?

Here is a link to the site that is still under construction:

http://www.encoreservices.co.za/ESMS/index.html


Posted on Jan 18, 2019 2:01 AM

Reply
Question marked as Best reply

Posted on Jan 21, 2019 5:54 AM

I hope this answer may be of some help to anyone who comes across this discussion.


I was hoping to get some help here but instead got trolls who offered the following advice:


"Sorry, this is not a place to get your html/css/javascript/... code working in Safari.

Engage a professional or use a better tool.

See here: https://www.wix.com"


"Sorry but your code did not work.

There are millions of complicated websites running on iOS without issues (banks, restaurants, flight, tickets, etc...)

You need to use a Mac to develop/test your website."


"As said you'll need a Mac.

See here: https://developer.apple.com/safari/"


"If you want to develop for iOS you need a Mac and Xcode. Not Google Dev, not Chrome, not Mozilla, not Windows, not anything else and certainly not an iPhone 5SE."


"So no thanks to me?

With that attitude, you won't go far."


The solution was quite simple, and did not require a Mac, or any special tools, that is other than Google and Patience...

Here is a link to see the full solution:


https://stackoverflow.com/questions/54236221/responsive-hamburger-menu-not-working-on-mobile-safari/54290816#54290816


And just for the trolls, this next link would have been helpful if I did not find it so dated:


https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html


For everyone else who may find this question, I hope the answer is useful to you, and that you have a better experience asking the developer community for help ;-)

13 replies
Question marked as Best reply

Jan 21, 2019 5:54 AM in response to 3otes

I hope this answer may be of some help to anyone who comes across this discussion.


I was hoping to get some help here but instead got trolls who offered the following advice:


"Sorry, this is not a place to get your html/css/javascript/... code working in Safari.

Engage a professional or use a better tool.

See here: https://www.wix.com"


"Sorry but your code did not work.

There are millions of complicated websites running on iOS without issues (banks, restaurants, flight, tickets, etc...)

You need to use a Mac to develop/test your website."


"As said you'll need a Mac.

See here: https://developer.apple.com/safari/"


"If you want to develop for iOS you need a Mac and Xcode. Not Google Dev, not Chrome, not Mozilla, not Windows, not anything else and certainly not an iPhone 5SE."


"So no thanks to me?

With that attitude, you won't go far."


The solution was quite simple, and did not require a Mac, or any special tools, that is other than Google and Patience...

Here is a link to see the full solution:


https://stackoverflow.com/questions/54236221/responsive-hamburger-menu-not-working-on-mobile-safari/54290816#54290816


And just for the trolls, this next link would have been helpful if I did not find it so dated:


https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html


For everyone else who may find this question, I hope the answer is useful to you, and that you have a better experience asking the developer community for help ;-)

Jan 21, 2019 5:40 AM in response to ckuan

To update,


Anyone who may battle with this, search this forum, and get silly replies for trolls voicing meaningless unhelpful comments, here is a workable solution to the problem I was trying to get help with.


other than to:


"Engage a professional or use a better tool." ,

"You need to use a Mac to develop/test your website." ,

"need a Mac and Xcode" ,

"With that attitude, you won't go far"


https://stackoverflow.com/questions/54236221/responsive-hamburger-menu-not-working-on-mobile-safari/54290816#54290816


I hope anyone with developer questions has a better experience using this forum, and that what I have shared could be of some assistance to you.


Thanks for playing,


3otes


P.S. There is documentation on the subject, something I was hoping to find by asking for help:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Jan 18, 2019 3:19 AM in response to ckuan

Thanks, this is what I am looking for help with. I am using a Windows machine and running Chrome dev tools to test. Under these conditions all works well, but when I go live, things in the styling are not the same? Does IOS have some place I can verify what CSS works on Safari and what does not? Like Safaris version of MDN documentation? https://developer.mozilla.org/en-US/


Jan 18, 2019 2:01 PM in response to ckuan

So I found the answer and I did not need a Mac, just some understanding of Safari. No thanks to you. Apparently Safari feels that a “click” event listener is nothing to a mobile device, I had to replace it with a “tuched” listener just for Safari! Mozilla, edge, and chrome don’t have that problem. I found this in the documentation for iOS Safari.

Jan 18, 2019 2:08 PM in response to John Galt

Hi I’m not developing for iOS just not excluding iOS in my development. Why limit your web page to a singular platform when customers have any number of device brands? I happened to have a old iPhone 5SE and use it to test if my code has bugs on iOS. The other major platforms like google, Mozilla and Edge seem to run with a standerdised set of rules, which iOS neglects here and there...

Responsive hamburger menu not working on mobile safari?

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple ID.