A problem repeatedly occurred on safari IOS how to fix?

Question

I am getting so annoyed with this problem (A problem repeatedly occurred error message) on ios iphone. Working hard to build a website but only iphone with recent ios versions has this problem. Thought chrome will load the site on iphone but same problem. It's some ios efficiency issues. Getting rid of css transform and animation didn't solve it for me. My site was designed on adobe xd and I exported it using web export and got some javascript to scale it for any display size. I don't know how the page artboard size was too big like width: 3554px and height: 2346px. Never faced any problem on windows and android. Recently iphone testing made me so disappointed. The javascript isn't causing the problem here even though there is transform scaling involved. I tested an initial version of the website where the javascript scaling didn't cause any problem. Then I cleaned up all animations and css transform. But still same problem. Is this because of big page size like width 3554px ...? Can't safari handle this ...? Please help me to solve it. I don't want visitors from iphone get disappointed on my website. I have some article pages which use css media query with like page width 2358px less than the home page. I don't have iphone but checked on friend's iphone that the article pages load but home page doesn't load. Fun fact I have this thing implemented like when you auto rotate webpage will go to full desktop site. Both home and article pages have same problem. But old ios versions didn't show this problem. If you have an iphone please check the links if you know what is the reason behind this. Thanks in advance everyone ... help needed ...

Home page https://elomymelo.com/index.html

Article page https://elomymelo.com/jbl%20flip%206%20meaningful%20upgrade.html

I don't have mac book. So if you got mac on latest os and safari please check it and let me know if there is this problem on mac os or not ...

CSS

#Web_1920__1 {
    position: absolute;
    width: 3554px;
    height: 2346px;
    border: 0px grey solid;
    background-color: rgba(255,255,255,1);
    overflow: visible;
    --web-view-name: Web 1920 – 1;
    --web-view-id: Web_1920__1;
    --web-scale-to-fit: true;
    --web-scale-to-fit-type: width;
    --web-scale-on-resize: true;
    --web-center-horizontally: true;
    --web-enable-deep-linking: true;
}

Those variables are for javascript and they're not causing the mentioned problem in the title ...

Answer 1

I've been debugging a similar issue reported by our userbase of individuals experiencing Safari on iOS 15.4.1 / 15.5 crashing with this error message of "A problem repeatedly occurred"

After some investigation, I've discovered that the issues likely has to due with iOS/Safari's update to WebGL 2.0 / WebGL for Metal, and issues with CSS @keyframes animations.

Specifically in regards to the issue I was experiencing, if there is a child element that has a CSS opacity rule applied to it within a parent element that has a CSS @keyframes animation applied to it, Safari would crash after several seconds and display this error.

If I removed the CSS opacity styling rule from the child element within this parent element that has the @keyframes css animation applied to it, OR if I just removed the css @keyframes animation styling rule from the parent element itself, this resolved the issue and the crash no longer occurs.

This issue does not appear to affect iPadOS 15.4.1, only iOS 15.4.1 or greater.

There's definitely some bugs that reside in this latest iOS / Safari update and I believe they are all related to this new WebGL 2.0 / WebGL for Metal integration (as per similar issues I read about here and here)

I have also reported this issue on the Apple Support forums, in hopes that they will address this in a future update.