egoselfaxis
asked on
JQuery Mobile Issue - CSS Hover events on form buttons requiring a double-tap in IOS
I have a custom web application that I built using jQuery Mobile (version 1.4.3) that's presenting a problem when using an iOS device (ie: iPhone, iPad, etc).
http://sts.ideasdesigninc. com/
username: demo123
password: demo123
The problem that I'm having is that the CSS hover events that I've attached to each of the buttons is requiring that the users have to "double-tap" on the Back and Next buttons in order to move backwards and forward in the quiz.
How can I fix this without having to sacrifice the the hover effects on the buttons? Is there a snippet of javascript code that I can add to the application that would handle this on iOS specific devices?
Thanks,
- Yvan
http://sts.ideasdesigninc.
username: demo123
password: demo123
The problem that I'm having is that the CSS hover events that I've attached to each of the buttons is requiring that the users have to "double-tap" on the Back and Next buttons in order to move backwards and forward in the quiz.
How can I fix this without having to sacrifice the the hover effects on the buttons? Is there a snippet of javascript code that I can add to the application that would handle this on iOS specific devices?
Thanks,
- Yvan
What hover events did you apply to the Back and Next buttons?
ASKER
Well .. I don't actually mean "events" as in JavaScript events. I'm just changing the background-color of the buttons.
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
color: #222;
background: #ddd; /* Old browsers */
background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
border: 1px solid #888;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa; }
Well, that doesn't make sense, since CSS styles shouldn't affect behavior. Are you saying that if you don't specify the hover styles that the buttons work as expected?
ASKER
Yes -- this is apparently a known issue on iOs devices, and I have verified that removing the hover effects suppresses the "double-tap" issue. I'd prefer to not have to remove them altogether, though, so I'm wondering if there might be a way to suppress them ONLY on iOS devices. Any thoughts?
- Yvan
- Yvan
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.