Span in anchor tag blocks event events for Safari on iPhone

Question

I developed a regular link that resembles a button in the Sencha Touch 2 mobile application, and I have problems with most of the links that do not work in Safari on the iPhone.

The link is a regular <a> tag with an internal <span> element containing the label text. The <a> element has an addition that allows you to register indentation. It seems that the internal <span> blocks the taps from registering in the parent anchor as a link, and its background is transparent.

Here's the markup:

 <a href="http://test-site.xx/full-site-page?param=value" class="x-button-normal x-button btn-profile"> <span class="x-button-label">View profile on full site</span> </a> 

Testing this in Chrome presents no problems, i.e. when you click on span, a transition to the parent hyperlink takes place. Both browsers are based on Webkit. One of our testers also tested this on Safari on a Macbook without problems; I also tested this in Chrome using a Wacom Bamboo tablet without any problems. This is only a problem on mobile devices (tested on both iPhone and Android 2.2) - that’s what we aim for.

Is there a CSS property that I can set in the <span> element to allow faucets to jump to the parent hyperlink? Ideally, I want to avoid the need to set events through JavaScript. Any ideas as to why this is not working as I expected?

Refresh . Here are the styles for the inner range reported by the Chrome Developer Console:

 -webkit-box-align: center; -webkit-box-flex: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-drag: none; -webkit-user-select: none; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; border-bottom-color: white; border-bottom-style: none; border-bottom-width: 0px; border-left-color: white; border-left-style: none; border-left-width: 0px; border-right-color: white; border-right-style: none; border-right-width: 0px; border-top-color: white; border-top-style: none; border-top-width: 0px; box-shadow: none; box-sizing: border-box; color: white; cursor: auto; display: inline; font-family: 'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, 'BBAlpha Sans', sans-serif; font-size: 18px; font-weight: bold; height: auto; line-height: 21px; overflow-x: hidden; overflow-y: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: static; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; width: auto; 

Many thanks.

Answer 1

Solved thanks to this post that mentions the following CSS property:

 pointer-events: none; 

Adding this to the style for the internal <span> (and internal floating <img> , as indicated in my second comment) allowed them to pass the response to the parent hyperlink.

It is strange that Sencha Touch 2 seemed to interfere with the DOM, not sure if it was in particular. An eruption of a button with a similar style on a fully static HTML page (without JavaScript, not to mention Sencha Touch 2) did not detect the initial problem on the mobile device.

Another option in the simple case (single <span> , without floating images) was to reorganize the styles to eliminate the need for an internal <span> , although this was not possible for a more complex case:

 <a class="attachment" href="/someRepository/someDownload.pdf"> <img src="/images/fileExtension-pdf.png" alt="Attachment"/> <span class="title">Title of download</span> <span class="size">xxx kB</span> </a> 

Answer 2

I think this is due to Sencha Touch scaling prevention. They added to the code to prevent most sensory events (which kill the use of the link). There is an exception for anchors, but not for children of anchors (so clicking on the anchor itself works fine, but does not click on the span inside the anchor). I was able to decapitate the fix in my application launch method:

 Ext.Viewport.setPreventZooming(false); // unbind any existing handler Ext.Viewport.doPreventZooming = Ext.Function.createInterceptor(Ext.Viewport.doPreventZooming, function(e){ return !Ext.fly(e.target).findParent('a'); }); Ext.Viewport.setPreventZooming(true); 

The above code does not contain any guarantees (not tested on Android, and I suspect that it is rather inefficient). I also reported this as an error: http://www.sencha.com/forum/showthread.php?215032-Links-are-prevented-when-tapping-on-children