Ionic Web App on Safari Flickers, Hides Elements

Ionic Framework Ionic Vue
1

Hi all,

I am hoping for some help with a broad problem I’m having. I am experiencing a raft of visual errors on my Ionic web app on Safari with no apparent root cause.

My app is live at this URL: https://kaskacards.ca Normally signup would be required but to save the trouble, you can log in with these details:

Email: sockpuppet.gargoyle.plant@gmail.com
Password: hello-ionic

The problem seems to be that certain elements don’t appear when the page loads. It’s primarily graphical because the invisible elements still appear in the inspector. But it’s quite random which elements won’t appear. Every time I go to a new route within the app, something else fails to load. In some cases, the vanished elements will rapidly blink in and out of existence as I scroll.

Normally I would suspect an issue with my code but I have no idea where to look at this point. I have stripped things down as much as possible to a standard Ionic build. (I did try removing the background image.) What’s especially jarring is that Chrome doesn’t show any of these issues.

Obviously this isn’t some finicky annoyance. It makes the app unusable. Does anyone want to take a look at this app, or does anyone have experience with Safari that may help? Anything would be so much appreciated at this point.

2

Update: after some digging through arcane fixes in Safari, I’ve found that the flickering stops if I add this CSS rule:

    * {
      backface-visibility: hidden !important;
      -webkit-backface-visibility: hidden !important;
    }

My problem is solved, although I must confess I am no more enlightened than I was before.

1 Like