I added a hamburger menu to my site recently and have been trying to get it to work on Safari (it works perfectly fine on all devices and browsers tested except Apple Products/Safari) .. it does work on Chrome on MacOS however for some reason.. even though I thought that was just a skin for Safari the way that Apple set it up. anyway..
TLDR The menu just doesn’t open on Safari.
Does anyone out there know the solution/the error in my code that has taken away the last 10 hours of my life?
Source:
REPO – https://github.com/Laterthanlate/RoomToRoam
SITE – https://laterthanlate.github.io/RoomToRoam
I tested on MacBook web inspector/developer environment, tested on iPhone. The hamburger.js file has the script for the nav/hamburger menu. I tested too many fixes to list here with modifications to the main.css, the hamburger.js, and the index.html, following/experimenting with every bit of advice I could find online/on CanIUse, on MDN/W3, etc. I even used GPT for like 3 hours to see if it could help figure it out. Nothing.
I tested to see if it was something simple like an issue with the css translation, but simplifying it down to just a display change, without any transformations/translations/transitions did not work. I tried simplifying the JS and removing anything that may conflict with Safari to the best of my knowledge/research, but it didn’t work.