Link to home
Start Free TrialLog in
Avatar of egoselfaxis
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
Avatar of Bob Learned
Bob Learned
Flag of United States of America image

What hover events did you apply to the Back and Next buttons?
Avatar of egoselfaxis
egoselfaxis

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; }

Open in new window

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?
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
ASKER CERTIFIED SOLUTION
Avatar of Bob Learned
Bob Learned
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial