CSS keyframe animation not triggering when using back button on iOS device - javascript

I am running a keyframe animation on the body element of my page that fades in and out the opacity of the background. The fade in animation is run directly on the body as a CSS rule, and the fade out is triggered by setting a class to the body element, when special links a clicked. The implementation works great on Android Chrome browser, and desktop Safari, Chrome, Firefox, IE11 and Edge.
The fadeout animation also works great when I click a link from an iOS device, but once I use the native back button in Safari it seems that the page just goes back to a previous view that it saved of the last page, without running the fadein animation again. Therefore the page looks broken.
How can I handle this? can I somehow force the iOS device to reload the page when I navigate back? or Would there be another way to handle it?

Safari does not "reload" the page when you hit the back button. One common workaround is to add some code to the footer of the page to tap into the pageshow event. You could then do something like.
const reloadAnimation = () => $("#my-element").removeClass("run-animation").addClass("run-animation");
window.addEventListener('pageshow', reloadAnimation)

Related

Display loading indicator when navigating away from page on Safari

I would like to display a nice page transition when navigating between pages on a site.
I've tried using these events: beforeunload unload pagehide and also visibilitychange.
There was a webkit bug described as
visibilitychange:hidden doesn't fire during page navigations
And a workaround is listed:
using the pagehide event is the workaround
I am adding a class to the html element on these events. On Chrome and Firefox this activates my loading indicator class and the animation is displayed until the page is replaced. I get a nice loading transition between page navigation. So, in Chrome and Firefox, everything works great.
Unfortunately, I am not having any luck with Safari on iOS (iPhone or iPad) and also failing on macOS Big Sur Safari. I found a related question here: Safari change dom on before unload page however, it only discusses the beforeunload event. I am hoping that by being less specific here that a viable alternative pops up.
I have tested the css works on Safari by manually applying it and also verified my listeners are called on Safari via the javascript console. However the css change doesn't seem to be rendered. There is no transition shown on the page being unloaded before getting the new page response from the server. I've also verified it isn't related to the CSS in use by setting a simple background color without any transition or similar effects.
So far, the only way that I have been able to get Safari to render the dom change is by returning a truthy string on unload - but this prompts the user if they want to leave or not which is not my intention.
I want to avoid browser detection - however the last viable alternative I can come up with is scanning the dom for anchors, buttons, forms, etc when Safari is detected to enable the loading indicator before navigating.
Are there any other options to consider?

iFrame FancyBox 2.1.4 in iOS - Iframe Scrolls up After Interacting with Div Using Javascript

When moving and displaying a div in a Fancybox iFrame (using javascript) in iOS devices, the iframe scrolls to top of the window and the user has to scroll back down to see the div. In non-iOS devices the div is moved into view without the iFrame scrolling up (which is what I want).
https://embed.plnkr.co/MhUHCeAaN6VVsllmovTj/
Steps to reproduce:
Navigate to the above url on an iPad using Safari
Tap "Open Fancy Box"
Scroll down and tap the "Click ME!" button
Notice the iFrame scrolls to the top.
The button creates a div, moves it to the top right of the point that was tapped, and makes it visible.
I confirmed this behavior on:
iPad (iOS 11.2.6)
Safari
Chrome
Mozilla Firefox
iPhone (iOS 11.2.6)
Safari
I confirmed this behavior does not happen on:
Windows 10
Safari (v 5.1.7)
Chrome
Mozilla Firefox
Android (7.0)
Chrome
I have tried the answer provided in this thread: fancybox2 / fancybox causes page to to jump to the top, but the iFrame still scrolls up after the button is tapped, and then locks the iFrame so you can't scroll back down.
I also tried using jQuery to scroll to the desired div (selecting with an id) after the onclick function finishes, but the iFrame doesn't move. Using "SLaks" suggestion here: How do you scroll an iframe from within using jquery?
I agree with Janis, this seems to be an issue with iOS specifically. So, I will create or upvote a corresponding bug ticket on the Apple website.

Scroll events stop working in Safari

I am developing a website that has scrolling transitions on the "index" page and then normal scrolling with a sticky navigation bar on other pages. The site also uses ajax to transition from one page to the next. I have an if statement based on if the user is on the index page use the scrolling transitions, else use normal scrolling with the sticky navigation.
The problem I've found is that in safari when I click on a link from the index page, scroll on the new page and then go back to the index page, the scroll transitions are not activated again. In fact it seems that the scroll events I have set up stop working entirely.
However this problem does not occur in any other browser: Chrome, IE, Edge or Firefox.
I don't know if it's best for me to post the code for it on here because it is a bit long. But here is a link to the code: http://www.dreshaddev.dreamhosters.com/layout/js/scripts.js
Here is a link to the development site: http://www.dreshaddev.dreamhosters.com/layout/index.php
I have tried multiple solutions like reinstating the same code after an ajax call and removing event listeners and re-adding them back in. I'm not sure what to do. I am testing this on Safari 9.1.3.

Mobile browsers: update element on back button

I'm using JavaScript to display a CSS3 throbber when the user navigates on a mobile browser (specifically, when they use a swipe gesture to navigate pages). However, when the browser back button is used, the throbber persists in both iOS and Android. I've tried adding the following to the body onload, but it doesn't seem to be firing.
<body onload='document.getElementById("throbber").class="off";'>
Any suggestions?
You need to listen to the Back/Forward Cache (bfcache) events: pageshow and/or pagehide. See https://developer.mozilla.org/En/Working_with_BFCache

mobile safari 5 not responding to js events until further acton

So check out http://www.toyota.ca/toyota/en/vehicles/yaris-hatchback/gallery using ios 5/mobile safari 5 or simulator press an image on the scroller at the bottom and a lightbox pops. Try to press the next button, you noticed nothing happens. Now if you zoom in/out or change orientation or scroll the page, the image will change.
The js works because the next/prev will become enabled/disabled as you press them but it does not do the animation part until further action. Why is this? is this common? If you try the same page on ios 4 it will work fine.
Don't use a click() handler, use a mousedown() handler.
Mobile devices have a hard time discerning between a click() and a mousedown().
The necessary change is line 472 in common.js, change
var o=p(f,c.prev).click(function(){b.prev()}),q=p(f,c.next).click(function(){b.next()});
to
var o=p(f,c.prev).mousedown(function(){b.prev()}),q=p(f,c.next).mousedown(function(){b.next()});
Either that, or, for every such navigation button, on creation, use:
$(selector).bind('mousedown',$(selector).data("events").click[0].handler)
$(selector).unbind('click',$(selector).data("events").click[0])
Where selector is the jQuery selector for the particular element.
Or you can just use $(class).off to clear the handler once and for all.

Categories

Resources