Safari blocking CSS transition when page load is triggered

Hi folks,

I'm currently working on a site with an off-canvas mobile navigation. It is positioned absolutely and is -100% on the y-axis, i.e. it is above the viewport, ready to smoothly drop down on clicking the menu button.

I have everything set up nicely, with a transform: translateY(100%) triggered by JS as a click event. It animates nicely and the nav links fade in too. My issue comes when selecting one of those nav links to browse to a new page on the site. I want the nav to translate back up off the screen before or during the page load, to ease the transition a bit. I also don't want the back-button in the browser to take the user back to the overlaid nav, but rather the page they were on.

I've added the JS to do this, however I've noticed a difference between Safari and Chrome that is quite frustrating. Chrome will successfully trigger the translate when a link is clicked, whilst simultaneously loading the next page; very smooth and has a clean back history. Safari, however, seems to halt all CSS activity as the next page loads, meaning the nav is stuck on the screen until the next page loads and the back button leads back to the nav and not the previous page.

Is there some aspect of Safari I'm unaware of that prevents this kind of thing being achieved? I have researched and found a history of elements freezing on page load or form submission, but no concrete solutions.

Hoping someone can help in some way!

David