Avoiding the iOS7 view units bug

[Michael_Morris]

Hello all. It’s been awhile, I’ve been swamped at work. I’d like to share some research I did last night.

Safari for iOS 7.1 or earlier has a buggy implementation of view units. There’s a couple of buggyfill scripts out there to correct the issue, but I’ve found them to be unreliable. I’d rather just stop iOS 7 from reading view units entirely.

Complicating things is the fact that iOS 8 finally fixed the issue. I do want my view units to be used, especially by the iPhone 6 and 6+, so how do I not only target a browser, but target a specific version of the browser?

My solution is in two steps. First, a very small (three lines) javascript snippet. Here’s the jQuery version since class manipulation is eased by that framework and most sites use jQuery anyway.

if( typeof window.HTMLTemplateElement === 'undefined' ) {
                $('html').addClass('noTemplates');
            }

What does the HTML Template element have to do with this? Well, iOS 8 has it and iOS 7 does not, so the line of code above injects the noTemplates class onto the HTML element only on iOS 7 or earlier.

We can’t stop there though. IE does support view units - indeed view units are a Microsoft innovation that first appeared on IE 9. IE doesn’t support the template element yet though. Fortunately, there’s webkit media queries. So here’s the css to use.

@media (-webkit-min-device-pixel-ratio: 1) {
        html.noTemplates <further selectors here> {
            <markup here>
        }
    }

IE doesn’t have min device pixel ratio either so it ignores it (indeed, even the other former webkit browser Chrome doesn’t support this particular webkit tag). With this you can override the view unit properties in just the buggy iOS versions and leave everything else intact.

[ralphm]

[color=lightgray]All off topic, I’m afraid …

@Michael_Morris

I do want my view units to be used, especially by the iPhone 6 and 6+

Don’t they all ship with iOS8? I doubt there’s a single one out there with iOS7 installed.

For the rest of us, we either upgrade or put up with the constant, annoying upgrade message, and the endless pestering of iTunes … all of which I suspect is too much for most people. All of which means that iOS7 is pretty much dead, I would think.[/color]

[Michael_Morris]

It’s still above 1%, at least according the access logs of the sites I’m responsible for, and the iPhone 4 can’t upgrade to iOS 8 at all (though the 4s can) and will remain a problem as long as its out in the wild. So the above provides a way to avoid the problem.

I don’t like steering around old software either, but it’s a part of life. At least it isn’t IE 8.