I am having the same issue on my site that uses animations. Only the main layout page shows. The content pages (SPA) are suppose to animate in on load but are blank in Safari.
I think there is an issue with the animations in Safari.
1 Like
Well let me know if you find a solution 
I’ll be here trouble shooting all day. At least it’s only 9.30am…I have a whole day to deep dive into this.
Actually, false alarm on mine. I still had javascript turned off. Animations work fine for me in Safari now.
Have you tried removing
async="true"
From
<script src="/dmxAppConnect/dmxAppConnect.js" async="true"></script>
as Ben suggests
The only reason I ask is I created a response override without it and now refreshing it loads correctly
I did yes…and at first I didn’t think it fixed it…but on further inspection it may be working now…I need to find some more apple phones to test
It is working on my Mac now even when not using my local response override so looks like its fixed ill have a look on my iPhone for you now
Edit just tested the link http://www.belindamary.com/arc loads correctly on my iPhone using Safari too
Nice catch Ben.
1 Like
Thanks for testing. I have indeed seemed to get it working and Ben is probably correct in his suggestion.
I had also updated Wappler and updated Node packages as well so not sure if it was something in that . I’m going to put the async=true back in and see if that breaks it to confirm.
CONFIRMED: This indeed did fix the issue for Apple/Safary. Thank you so much Ben.
I tested again by putting async=true back in, and it broke it again. Took it out, fixed it!.
Thank you!
EDIT: There was also an issue where the offCanvas menu was not hiding on link click using offCanvas.hide()
Removing async=true from the DMX offCanvas script also fixed this issue.
1 Like
I came across the same issue on Safari in one of my projects; and it turned out that at some stage I had added async="true" to the <script src="/dmxAppConnect/dmxAppConnect.js"></script>. After removing the async tag, the site started loading correctly.
It was only an issue on the Safari browser; the website was loading correctly on the other popular browsers.
1 Like
Yes that is exactly what has happened here. Its shame its so difficult (compared to Firefox/Chrome/Edge) to test and debug on safari if you don’t own a Mac.
Another reason i hate Apple
If anyone knows of a good way, let me know…apart from setting up a VM or secondary boot drive and installing MacOS lol
3 Likes
Hi, Philip!
You can use tools like https://www.lambdatest.com/ or https://www.browserstack.com/ for testing websites on different devices and browsers.
1 Like
So, Chrome and Safari both support the async attribute, but there might be subtle differences in how they handle it. These differences can include execution order, timing, and browser-specific optimizations. To ensure a consistent experience across browsers, make sure to test your website thoroughly as suggested before.
In any case, you don’t want app connect to be async or to defer it. Given that all the app relies on that library it should be the first one loaded and available for the rest.
Why did you add the async attribute?
2 Likes
I was going to suggest the same. We use lambdatest. Its great. Its bit finnicky to work with, since its all emulation and virtual machines on browser - but it allows debugging and fixing errors on various combinations of devices, OS, browser versions.
1 Like
Blockquote
Why did you add the async attribute?
From memory, It was done to improve the Google lighthouse score during optimisation
I was testing the other day on BrowserStack, although I didn’t see any options to view the debug/dev console?
Just verify that it loaded on a Safari browser.
Thank you for the suggestions though everyone! I will have to check out Lambdatest
In Lambda test, if you are testing on desktop devices, you can just right click to open dev tools - just like regular browser.
And for mobile devices, there is a separate button on the right to open and connect dev tools - for both iOS and Android.