Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Aug 13, 2013, 09:33 AM   #1
wedelgaard
macrumors member
 
Join Date: Jul 2012
Location: Hillerød, Denmark
 
mobile safari click/touch behavior on links - bug?

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
wedelgaard is offline   0 Reply With Quote
Old Aug 13, 2013, 01:10 PM   #2
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
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
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Aug 13, 2013, 01:43 PM   #3
wedelgaard
Thread Starter
macrumors member
 
Join Date: Jul 2012
Location: Hillerød, Denmark
 
Quote:
Originally Posted by SrWebDeveloper View Post
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
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.
wedelgaard is offline   0 Reply With Quote
Old Aug 13, 2013, 03:52 PM   #4
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
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.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Aug 14, 2013, 02:14 PM   #5
wedelgaard
Thread Starter
macrumors member
 
Join Date: Jul 2012
Location: Hillerød, Denmark
 
Quote:
Originally Posted by SrWebDeveloper View Post
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.
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
wedelgaard is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Tags
development, mobile safari, web

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Resolved: Anyone else seeing Mail.app crashes when they click on links? kalirob99 Jailbreaks and iOS Hacks 6 Mar 10, 2014 05:45 PM
Copy and Paste bug? Or just it's behavior? PicnicTutorials OS X Mavericks (10.9) 0 Jan 23, 2014 01:53 PM
Facebook links open Safari instead of mobile FB app ToothTooth iPhone and iPod touch Apps 1 Oct 30, 2012 09:31 AM
Change Safari 6 behavior to automatically download .mp3 links blahbrah OS X 10.8 Mountain Lion 0 Aug 27, 2012 08:44 PM
iPad: Cannot click on links/notifications after JB? (5.1.1 New iPad) jesterscourt Jailbreaks and iOS Hacks 0 Jun 10, 2012 07:03 PM

Forum Jump

All times are GMT -5. The time now is 01:11 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC