Check iOS6 requestAnimationFrame bug

by Julien Etienne

HTML

<div id='results'></div>
<div id='ua'></div>

JavaScript

/**
 * requestAnimationFrameIOS6BugChecker.
 * @Copyright 2015 - Julien Etienne. 
 * @License: MIT
 */

// Is this "device|CSS width" mobile? http://mydevice.io/devices/
var hasMobileDeviceWidth = screen.width <= 768 ? true : false,

/** 
 * Does the browser "require" the prefixed version: "webkitRequestAnimationFrame"? 
 * IOS 6x uses Safari 6x (8536.25), therefore being the only iOS
 * version to require the webkit prefix.
 */
requiresWebkitRequestAnimationFrame = !( (window.webkitRequestAnimationFrame && window.requestAnimationFrame)),

/**
 * The problem with just the above is that we end up targeting all
 * mobile webkit devices that rquire the prefix. We solve this by
 * checking if the browser doesn't feature the "Navigation Timing API".
 * (All Android Chrome versions feature this API), and Android browsers 
 * prior to this feature support do not support requestAnimationFrame.
 */
hasNoNavigationTiming = window.performance ? false : true;

// Let's put it to use:
var rAFiOSBugCheck;
if (requiresWebkitRequestAnimationFrame & hasMobileDeviceWidth & hasNoNavigationTiming) {
    /**
     * We now feature detect to eliminate "iOS Safari & Chrome" versions 
     * that do not support requestAnimationFrame.
     */
    if(window.webkitRequestAnimationFrame || window.requestAnimationFrame){
    rAFiOSBugCheck = 'WARNING, this device has the iOS6' + rAF + 'bug';
    }else{
        rAFiOSBugCheck = 'requestAnimationFrame is not supported';
    }
} else {
    rAFiOSBugCheck = 'This device is clean';
}

// =====================================
// Display results.
var div = document.getElementById('results'); // For display.
var uaDiv = document.getElementById('ua'); // For display.
var rAF = requiresWebkitRequestAnimationFrame ? 'webkitRequestAnimationFrame' : 'requestAnimationFrame';
div.innerHTML = 'Screen width: ' + screen.width + '<br>' + 'Timing name: ' + rAF + '<h1>' + rAFiOSBugCheck + '</h1>';
div.style.fontSize = '1em';

//...