PACE reaches 99% and never completes on safari mobile devices

[ddowell617]

As can be seen on my site here - https://www.kobejet.com - when viewed using safari on an iPhone or tablet the pages never finish loading initially. The percentage progresses to 99% and then hangs there indefinitely, unless you navigate away from the page, wait a while, and then go back to the page - somehow this let's it "get over" whatever is making it hang.

The issue has also been reported and several workarounds suggested here:

• https://stackoverflow.com/questions/43887415/pace-js-never-reaches-100
• https://www.drupal.org/project/pace/issues/2972515
• https://github.com/HubSpot/pace/issues/324

Potential similar/related issue for IE?

• https://github.com/HubSpot/pace/issues/84

[MrUltimate]

I'm having this issue, were you ever able to figure this out @ddowell617 ?

[ddowell617]

Unfortunately, no. I ended up uninstalling the module on all my sites and am now using basic keyframes animations to make the loading screens more friendly.

David Dowell (360) 603-1752

On Tue, Apr 14, 2020 at 7:30 PM Shivam Sinha notifications@github.com wrote:

I'm having this issue, were you ever able to figure this out @ddowell617 https://github.com/ddowell617 ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/HubSpot/pace/issues/470#issuecomment-613779607, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKBI7U224G23UAXJ3HD75VTRMUL5HANCNFSM4FN5HXZQ .

[MrUltimate]

That's unfortunate. I used this hacky script from StackOverflow to workaround it:

var initDestroyTimeOutPace = function () {
      var counter = 0;
      var refreshIntervalId = setInterval(function () {
        var progress;
        if (typeof document.querySelector('.pace-progress').getAttribute('data-progress-text') !== 'undefined') {
          progress = Number(document.querySelector('.pace-progress').getAttribute('data-progress-text').replace("%", ''));
        }
        if (progress === 99) {
          counter++;
        }
        if (counter > 50) {
          clearInterval(refreshIntervalId);
          Pace.stop();
        }
      }, 100);
    }
    initDestroyTimeOutPace();

It forces Pace to stop once it hits 99% and takes more than 500ms.

[keyurwd]

This happens every time

[daliborhonza]

I try some solutions, but finally help set eventLag to false

paceOptions = { eventLag: false, };

[ahernawan]

WORKS and tested on Edge. Based on @daliborhonza, I just adding restartOnRequestAfter into false.

//Only show the progress on regular and ajax-y page navigation, not every request data-pace-options='{"eventLag": false,"restartOnRequestAfter": false}'

Documentation: https://codebyzach.github.io/pace/docs/

[con-cis]

I solved by working with HTML Dom Events:

document.addEventListener("readystatechange", () => {
  if (document.readyState === "interactive") {
    // do fancy stuff like not pace.js related stuff (animations etc.)
  } else if (document.readyState === "complete") {
    // force all animation to finish
    Pace.stop();
    document
      .querySelector("#pace-content")
      .classList.replace("opacity-0", "opacity-100");
  }
});