Span inside anchor tag blocks tap event for Safari on iPhone - iphone

Question

I've styled an ordinary link to resemble a button in our Sencha Touch 2-based mobile application, and I'm having issues with most of the link not functioning in Safari on the iPhone.
The link is an ordinary <a> tag with an inner <span> element containing the label text. There is padding on the <a> element, which allows taps to be registered. It appears that the inner <span> is blocking taps from being registered in the parent anchor as a link tap, 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 doesn't present any problems, i.e. clicking the span causes the parent hyperlink to be followed. Both are Webkit-based browsers. One of our testers also tested this in Safari on a Macbook with no problems; I have also tested this in Chrome using a Wacom Bamboo tablet with no problems. This is only an issue on mobile devices (tested on both iPhone and Android 2.2) - which is what we're targeting.
Is there a CSS property I can set on the <span> element to allow taps to fall through to the parent hyperlink? Ideally I want to avoid having to set events through JavaScript. Any ideas as to why this isn't working as I'd expect?
Update: Here are the styles for the inner span as reported by Chrome's 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 it, thanks to this post which mentions the following CSS property:
pointer-events: none;
Adding this to the style for the inner <span> (and inner floated <img> as alluded to in my second comment) allowed these to pass the tap through to the parent hyperlink.
The strange thing is that Sencha Touch 2 seemed to interfere with the DOM, not sure what it was in particular. Mocking up a similarly-styled button on a completely static HTML page (no JavaScript, let alone Sencha Touch 2) did not exhibit the original problem on a mobile device.
Another option in the simple case (single <span>, no floated images) was to refactor the styles to eliminate the need for an inner <span>, though this wasn't feasible for the more complicated 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 has to do with Sencha Touch's prevention of zooming. They have added in code to preventDefault most touchstart events (which kill the use of the link). There is an exception for anchors, but not for children of anchors (so tapping on an anchor itself works fine, but not tapping on a span within an anchor). I was able to monkey patch a quickfix 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 comes with no warranties (have not tested on Android and I suspect it to be fairly inefficient). I have also reported this as a bug: http://www.sencha.com/forum/showthread.php?215032-Links-are-prevented-when-tapping-on-children