0

I am experiencing a strange behavior when using the native browser prev/next button. When navigating to a page and coming back to the previous one, the transition doesn’t disappear. It just hangs on the screen until I refresh the page.

The funny and frustrating part is that it sometimes works and sometimes not on the same device. Mostly, it has problems with Chrome (desktop) and mobile (iOS, Android). If it works on a desktop then it may not work on a mobile, and vice versa. I also tested it a lot on my friends' devices and as might be expected some of them worked and some didn't.

I suspect a problem may be in the "On link click" section. But I don't know what's wrong there. :( I hope someone can help me.

// Wait until the whole page is loaded.
$(window).on("load", function () {
  hideLoad(); // call out animations.
});


// Transitions In
// =================
function revealLoad() {
  $("#page-transition").removeClass("tt-transition-out");
  $("#page-transition").addClass("tt-transition-in");
}

// Transitions Out
// ================
function hideLoad() {
  $("#page-transition").addClass("tt-transition-out");
}

// On link click - I suspect a problem may be in this section
// ==============
$("a").on('click', function(e) {
  e.preventDefault();

  setTimeout(function (url) {
    window.location = url
  }, 1500, this.href);

  revealLoad(); // call in animations.
});

Codepen: https://codepen.io/mrWilson123/pen/VwrXebj

You can test it live here.

mrWilson
  • 91
  • 1
  • 2
  • 13

2 Answers2

0

this may help you, use $(document).ready(function(){}) instead of $(window).on("load", function () {}) because you have some images and$(window).on("load", function () {}) triggers after every thing have been loaded.

more explanation : https://stackoverflow.com/a/3698214/11143288

mostafa khoramnia
  • 199
  • 1
  • 7
  • Thanks for the reply, @mostafa but unfortunately it didn't help. :( The logic is that when you open a site, the `hideLoad()` function is activated. If you click on the link then the `revealLoad()` function will start. It will wait for the specified time and then a new page will load (URL will change). After loading a new page, the `hideLoad()` function is activated again. It works nicely as long you click on the links, but as soon as you use the browser's back button then the problems I described above start. – mrWilson Feb 20 '22 at 14:10
  • It seems that's a bug after back button, onload doesn't trigger, I couldn't find any solution because in my browsers everything is ok. This link may help https://stackoverflow.com/questions/158319/is-there-a-cross-browser-onload-event-when-clicking-the-back-button – mostafa khoramnia Feb 20 '22 at 14:39
  • For me, it works on a desktop but doesn't work on mobile. Looks like it has nothing to do with my code. I created a new test site. I completely removed the page transition code. I replaced it with one short line: `alert("Test!");` Nothing more. [You can test it here](https://test.themetorium.net/yuku-simple/index.html). Now I'm even more confused. – mrWilson Feb 20 '22 at 16:20
  • 1
    Would you try this? https://stackoverflow.com/a/13123626/11143288 – mostafa khoramnia Feb 21 '22 at 07:50
0

It looks like the code below did the trick. :)

window.onpageshow = function (event) {
    if (event.persisted) {
        window.location.reload();
    }
};

Source: https://stackoverflow.com/a/13123626/2785140

Thanks, @mostafa. :)

mrWilson
  • 91
  • 1
  • 2
  • 13