Enabling :active on iOS

We have a number of 'more info' icons that are used to display extra help text for thing like form fields. In desktop browsers, the help text appears when a user hovers over the icon using the css :hover pseudo-selector. There are obvious problems with this on mobile devices so we also apply the same styles using the :active pseudo-selector as well. This works great on Android with the help text appearing when the user clicks on the icon. Unfortunately though the :active state doesn't work by default on iOS.

The fix for this is to bind a handler to the touchstart event for elements that need to respond to :active. This handler doesn't even need to do anything, just it's presence is sufficient. There is more information on this on the Apple developer site.

A global way to set this is to apply it to the body element using something like

<body touchstart="">

However Google's page on the issue advises that this can lead to poor scrolling performance and so a more efficient solution is to bind it just to the elements that need it. They also suggest testing against the user agent to only add the event handler on iOS devices.

Since we already have jQuery loaded and some of the pages already make use of $(window).on('load') we modified the script from the above page to the following

$(window).on('load', function() {
  if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
    $('.things-that-need-active').on('touchstart', function() {});
  }
});

Styling inputs on iOS

By default Safari on iOS will add additional styling to inputs meaning that they may not display as they would on desktop or other mobile devices. This can be reset using

input {
    -webkit-appearance: none;
    border-radius: 0;
}

Styling selects on Android 4.1

Select boxes don't style well on Android 4.1. In particular, applying any border or background styles will cause the dropdown arrow on the select box to disappear. The end result is that the select box just looks like a normal input box, which is an obvious accessibility issue. There doesn't seem to be a great fix for this. The best approach we've found so far is that suggested by the Bootstrap guys which is to use a class to style the select, then remove that class on problematic devices and reapply only styles that don't trigger the issue.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Phone numbers on iOS

iOS will automatically look for things that could be phone numbers and convert them to hyperlinks. Unfortunately it seems that it is a bit loose about what it considers to be a phone number. In our case, it was treating ISBN numbers as phone numbers which obviously then caused problems if users clicked on the links. According to the Apple website, the fix for this is to add the following meta tag

<meta name="format-detection" content="telephone=no" />

You can still explicitly tag phone numbers use <a> tags.

As an aside, there seems to be some debate as to whether these should use the tel: or the callto: URI scheme. According to the IANA registry, tel: is the correct scheme for phone numbers and callto: is specifically for initiating a Skype call. Sure enough we found that tel: worked as expected on both Android and iOS devices, initiating a phone call when clicking on the link whereas callto: didn't. A complete link would look like

<a href="tel:+441234987654" title="Call customer services">+44 1234 987 654</a>