mobile safari click/touch behavior on links - bug?

Discussion in 'Web Design and Development' started by wedelgaard, Aug 13, 2013.

  1. macrumors member

    Joined:
    Jul 26, 2012
    Location:
    Hillerød, Denmark
    #1
    Hi guys,

    I've been scraching my head for some time about a problem i've encountered. Maybe some of you have an answer.

    If you have an anchor-tag like this: <a id="mybutton" href="#">my button</a> and you click just outside the anchor element on mobile safari, the default behaviour of the anchor tag is executed. Even if you have custom events bound to the anchor tag these are not executed.

    If you press inside the anchor element it works as expected (executing the custom event). Return false, event.preventDefault() for all anchortags with # as href does not work as a solution.

    I've uploaded a movie showing the problem in the attached link.

    Hope any of you guys have a reasonable explanation for this weird behavior :)

    Thanks.

    http://filer.wedelgaard.dk/testMovie.m4v
     
  2. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    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
     
  3. thread starter macrumors member

    Joined:
    Jul 26, 2012
    Location:
    Hillerød, Denmark
    #3
    Yes that would work just fine, if you remove the href attribute from the anchor tag it solves the problem as well. I'm just curious to know what causes this issue.
     
  4. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    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.
     
  5. thread starter macrumors member

    Joined:
    Jul 26, 2012
    Location:
    Hillerød, Denmark
    #5
    The dimensions of the a link should be well defined. I thrown together a quick example showing the problem. If you click/touch (using an iOS device) just outside the blue button, you are able to see a small flicker on the button, which I assume is a href="#" being executed.

    http://codepen.io/anon/pen/gtKmA
     

Share This Page