mobile safari click/touch behavior on links - bug?

SrWebDeveloper said:

Would this work any better?

HTML:

Code:

<div id="mybutton">Foobar</div>

JS:

Code:

document.getElementById('mybutton').onclick = function(e) {
     
     // whatever, i.e. window.location="/path/to/page";

     e.stopPropagation();
}

CSS:

Code:

div.mybutton {

width: 150px;
height: 50px;
background-image:url('mybutton-background.gif');
text-align: center;
vertical-align: center;
font: arial 13px bold;
color: white;
margin: 0 auto;
padding: none;
}

div.mybutton:hover {
cursor: pointer; // or whatever you want
}

Get the idea? Use a div with defined width/height sizex as your desired button so the hover area is well defined, use JS click event to do whatever you want. All above untested examples to show the concept, obviously edit and refine to suit your specific needs and styling.

-jim

Click to expand...

SrWebDeveloper said:

Guessing...

Notice I put in bold in my comment "so the hover area is well defined." By that I meant the div container has a sensible (human usable) static height and width all of which is subject to hover or link. Not just anchor text with CSS styling applied (like a button background image) which the browser would not factor in as being part of the anchor. I'm guessing you didn't set static dimensions in CSS to either the anchor or a div or span surrounding it, but I can't be sure as you did not include source code/CSS related to this issue.

Hope this made sense, like I said, I'm not sure.

On a side note - I'd use my method on a full sized web site and allow the responsive theme rules to apply formatting for mobile devices.

Click to expand...