iOS Standalone App 300ms Click Delay

Question

Last year webkit removed the 350ms delay for iOS. When I run my website in Safari's mobile browser, the delay no longer exists, and works as expected.

However, when I run my web application in standalone mode, the delay exists, and is blatantly obvious.

Here's my metatag that I'm using:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1, width=device-width">

I've tried variations of the sort, without luck.

It's hard to find anything about standalone applications, none-the-less this apparent issue.

Does anyone know why this 350ms delay click only occurs in standalone mode? As a workaround, I'm having to bring fastclick into the project, which isn't ideal.

Note: I'm running iOS 9.3.5 / iPhone 6

This problem seems to be fixed now in iOS 11 standalone web apps. See also: https://forums.developer.apple.com/thread/43415 — user2309038, Oct 14 '17 at 08:02

score 10 · Accepted Answer · edited May 23 '17 at 12:10

There seems to be no native workaround, and this appears to be a known issue, regardless of being fixed in webkit.

Begin Rant

Apples lack of support, and attention to detail for standalone apps is truly unbelievable; especially as of version 9.3.5.

Between this issue, and the major Youtube player issue on standalone apps. Perhaps Apple should stop worrying about removing the headphone jack, and adding some mystical "Touch Bar, and actually fix their damn platform.

End Rant

You'll have to use FastClick to solve the issue. Apply it only to iOS. You can go further, and only apply it to standalone apps, as it works fine if the app isn't in standalone.

My script tag is placed after the DOM, and the initialization looks like this:

    if (isIos() && isRunningStandalone()) {
        // Initialize Fast Click
        // Even with the latest webkit updates, unfortunatley iOS standalone apps still have the 350ms click delay,
        // so we need to bring in fastclick to alleviate this.
        // See https://stackoverflow.com/questions/39951945/ios-standalone-app-300ms-click-delay
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function () {
                FastClick.attach(document.body);
            }, false);
        }
    }

   isIos = function () {
        // Reference: https://stackoverflow.com/questions/9038625/detect-if-device-is-ios#answer-9039885
        return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    };

   isRunningStandalone = function () {
        // Bullet proof way to check if iOS standalone
        var isRunningiOSStandalone = window.navigator.standalone;

        // Reliable way (in newer browsers) to check if Android standalone.
        // https://stackoverflow.com/questions/21125337/how-to-detect-if-web-app-running-standalone-on-chrome-mobile#answer-34516083
        var isRunningAndroidStandalone = window.matchMedia('(display-mode: standalone)').matches;

        return isRunningiOSStandalone || isRunningAndroidStandalone;
    };

Thanks for this recent answer. I can't believe this is still a thing in 2017! Nobody ever used Apple's "tap to scroll down" feature anyway… — JoLoCo, Sep 12 '17 at 22:19

score 3 · Answer 2 · answered Mar 15 '18 at 19:23

3

Apple recently released iOS 11 (11.2.6 in my case), with more support for progressive web apps (like reading manifest.json and other PWA features), and finally appears to have resolved this problem by no longer imposing the click delay.

answered Mar 15 '18 at 19:23

Lance

81
5

score 0 · Answer 3 · answered Mar 03 '17 at 14:54

0

There seems to run a different browser instance when you run it in standalone, probably an older version. Not known fix nor expected date either I am afraid.

As a workaround, you can try if ontouchend may work for your case

answered Mar 03 '17 at 14:54

Miguel Guardo

673
6
16

iOS Standalone App 300ms Click Delay

3 Answers3