Ahhhh - Pulling my hair out...Urgent Apple/Safari help needed :(

Wappler General
1

Hey All,

I did my wife’s author website for her a while ago and we launched an ARC campaign today (just getting people to sign up to be Advanced Reviewers) and turns out…the WHOLE DAMN WEBSITE doesn’t seem to work on Apple/Safari devices.

I know…I should have done more testing, but all my work is in the business space I’ve never had to test for safari compatibility.

It’s a simple BS5 website, but something is clearly not compatible with Safari…and i have no apple devices to test on.

Can someone with safari dev tool see if something stands out as glaringly broken?

Its at www.belindamary.com/arc

Maybe its the smooth scroll function?

2

I would say it is definately your scroll animation. The site comes up fine in Safari if I disable javascript, but of course the animation doesn’t display.

Edit: I have a site done a few years ago now with scroll animations and apparently it has the same problem. Guess no one visits our site in Safari. Now I gotta remove scroll animations.

3

Ok that’s something to work on…thank you. I hate that I can’t easily download Safari and test this…I know their are emulators, and I guess I’ll need to look into that.

4

But does that mean that the standard BS5 / Wappler Smooth Scroll feature simply doesn’t work on Apple devices? Is there no Wappler workaround? Or is it common knowledge that it doesn’t work?

Perhaps It would work on BS4…

5

This is the first I hear of it but I can definatlely reproduce it in Safari.

6

Interesting. I have a different site I checked that uses SmoothScroll and it works on my wife’s work phone (apple)…but the difference is that was built on BS4…

7

This is where you start:

Screenshot 2023-05-08 at 3.16.31 PM
Screenshot 2023-05-08 at 3.16.31 PM1584×552 169 KB

Without dmx, you won’t get very far. Have you made some custom changes along the way? Maybe in routing?

1 Like
8

The entire page is set to be hidden:

Screenshot 2023-05-08 at 3.20.58 PM
Screenshot 2023-05-08 at 3.20.58 PM1030×216 26.6 KB

9

That is strange… is that the main page html code? I’m looking in Wappler and can’t see that…

10

That is the dev console for Safari for the index page.

1 Like
11

Ok…strange. Well its built as an SPA and i’m not using the index.ejs page. Its routed to go to /home

12

Yes, whatever the root of your site is.

1 Like
13

Ahh, ok…I guess Apple/Safari must be hiding it for some reason…as here is the code from the main layout page:

<html lang="en">
<head>
  <base href="/">
  <script src="/dmxAppConnect/dmxAppConnect.js" async="true"></script>
  <meta charset="UTF-8">
  <title>Belinda Mary</title>

I guess i’ll either revert back to BS4…or start removing Wappler componenets to see if one of those is causing the issue…

14

There is nothing wrong with BS5 or Wappler components in Safari.

I’m assuming you don’t have some js adding that style? Maybe a syntax error someplace since other browsers work fine.

1 Like
15

You can see it actually loads, but then that style is added:

Screen Recording 2023-05-08 at 3.40.29 PM

1 Like
16

Also, you’re using App Connect 2 - you have Beta extensions enabled. Consider disabling to verify if the issue persists

1 Like
17

Even though you are not seeing the problem extensively on other browsers, it is actually there. If you load the page in chrome with dev console open, you can see the visibility style tag added to html element, but in Chrome it is also removed after it is added.

This makes me think it is a timing issue, perhaps a flow is doing something if not raw js?

1 Like
18

Try using async instead of async="true".

2 Likes
19

Actually, come to think of it, remove the async bit altogether.

2 Likes
20

You are right…i can see it in Chrome. At least that gives me something to troubleshoot. I feel helpless thinking the issues are only visible in Safari and i don’t have means of seeing them.

This gives me hope. Thank you Ken. I’ll keep working at it and look at suggestions below as well.