I'm having an issue where my CSS works on desktop browsers (Chrome, Firefox, Microsoft Edge, Safari), but not iOS devices (Safari on iPhone/iPad, for example).
Does anyone know the solution?
I've tried adding -webkit-appearance: none; and some other snippets to try and get iOS to produce the CSS behaviour I want, but have had no success with it.
Edit: Just to add some more background, it is a multiple choice widget for a quiz and there is a feedback sheet that pops up and shows what people got right or wrong. The CSS will highlight green, red, or dashed border to indicate correct, wrong, or what should have been chosen. The CSS also marks off scene navigation buttons as done, and affects buttons in a team random name picker and score counter. It all works on desktop browsers, but nothing happens on iOS ipad/iPhone. I've not tested Android yet.
If you aren't able to identify by digging in with the dev tools, it would be useful to give steps to reproduce and screenshots on desktop vs. iOS... I wasn't able to identify where the difference was .
Thanks for the further response, really appreciated.
Attached are 4 pics to show how it should work (Mac OS Safari version) and the version with issues (iOS Safari). Basically, when someone clicks option ABCD on any of the pages and presses 'Check', they should see green, red, dashed border on the feedback page. The page navigation button (1, 2, 3, etc.) should turn grey, too.
I've not yet had a sit down with the dev tools, but it's on the agenda for tomorrow.
I don't think the problem is one of CSS, but of event handling.
It seems like you're mixing and matching jquery click handling and Hype click handling at some level, so it is hard to specifically determine what you mean to do.
However the root of the issue is that on iOS, Hype is using touch events and not mouse events to drive actions. Touch events generally are lower-latency and don't generate the same mouse events. However you can use mouse events to have the same desktop behavior.
If you uncheck Use Touch Events in the Document Inspector, you'll find this works on iOS.
(As a side note, I see looking in the developer console you have an error with your localStorage setItem in the optionSelected() method).