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.
i'd try to connect your iPhone/iPad to the mac and use safaris devtools to display your devices setup console/etc. ... so you can see what's happening ...
Hi, Hans-Gerd. Many thanks for the response and the useful article attached. I'll have a read and try using safari devtools, great to have some guidance on this.
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).
Thank you so much Jonathan for taking the time to look into it. It now works!
Much appreciated.
I'll have a look into the optionSelected() method to see if it might cause issues, although on the full version of this with other functions and features, it was working okay.
.
!