jquery .show() and .hide() not working in safari - adding spinner to <a

Question

I have some very basic code that acts as a loading gif for a webpage:

The loading and content containers sit in my base template. The

---

//header         


        

Answer 1

I am having the same issue as the OP, I am simply trying to have an element display only when on IOS, show/hide do not work, any combination of add class/remove class is not working either.

In my case I am working on progressive web application and this issue has eaten half of my day.

I even have an alert in the same function method that tries to fire the show, and/or remove class. This alert fires as expected but the element never appears. If I simply remove the hide class and reload the page it appears, if I change the element to show by default in CSS it works, but nothing I have tried so far gets the element to appear via JS. I have tried it in the CSS spreadsheet and with inline style. I've tried using visibility, display none/block, and simply hiding/unhiding via JS. Nothing works on IOS. Works fine in Chrome, Internet Explorer, Edge, Firefox, and various other browser. It just won't work in Safari on IOS and frankly I am stumped as to why.

If I ever get to the bottom of this issue I will post an answer but I have to say this is proving to be one of the more inexplicable situations that I have encountered in a 20 year development career.

!!UPDATE!!

Fixed it yes! After much stress, a colleague suggested it may be a popup blocker in Safari... he suggested tying it to a click in order to prove the concept.

At that precise moment an error modal popped up all on its own which led me to think... wait a minute - how does that work. It doesn't happen on page load! There is a delay!

And VOILA - wrapping the show functionality in a very small setTimeout function (10ms) solves the problem.

In my case I am adding functionality to replicate the Android PWA "add to home screen" functionality for IOS, so when the device is detected as IOS and when the PWA is not already on the home screen, the user is gently prompted to add it.