Scrolling trough slides causes page refresh and complete crash on newer iPhones (both Safari and Chrome)

[kovinet]

Description

We have been having HUGE problems with these script on latest iPhones. While everything works fine on desktop and on Android devices, as well as on some older iPhones (tested on iPhone 7, iPhone 11, IPhone SE) the site completely breaks on iPhone 14 after trying to scroll. What happens is that when trying to go to slide next slide browser tries to refresh the page instead and then it completely crashes.

We have tried removing some content like images, in this case it is possible to scroll like 3 or 4 slides and then the problem repeats, making the page completely unusable on these devices.

I have been trying to isolate the problem for hours and it is hard, because I don't own new iPhone and it works on all devices I own. But the problem has been reproduced on at least 4 iPhones, where page completely crashes when trying to scroll.

Versions

iPhone 14 (Safari and Chrome), reproduced also on some other iPhones, while working on most older ones

[kovinet]

After doing more extensive testing I am starting to notice that the problem lies somewhere in CSS.
When I remove all of my own CSS and just leave fullpage.css it seems to work.

[alvarotrigo]

Interesting 🤔
It'd be nice to know exactly which styles are the ones interfering with it.

Perhaps removing part of them multiple times until you figure out which can be the one creating the issue?

[kovinet]

It must be some really weird bug and it only happens on some iPhones, while working perfectly on iPad, Desktop Chrome, Android phones.

Here is video screencast of broken experience on iPhone 14: https://www.screencast.com/t/2kwzeR0JwR4q

And how it is working perfectly on Android: https://www.screencast.com/t/v4EooCbjJ

By now I have deleted most of dependencies, so it's just fullPage.js + 300 lines of css, still breaking on iPhone, sometimes I can scroll few slides then it tries to refresh the page when trying to swipe and then showing Can't open this page error...

[alvarotrigo]

If you remove those extra 300 lines of CSS, it works just fine, right?

Probably the easiest way to find out what's the cause of the problem is by reducing those 300 lines bit by bit until you find what it can be :)

[kovinet]

I found that if I delete these lines:

.text {
    padding: 80px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
.text h1 {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 50px;
}

.text h2 {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 50px;
}

.text h3 {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.2;
    text-transform: uppercase;
    margin-top: 50px;
    margin-bottom: 30px;
}

Then it works better, it still crashes, but after 3 or 4 sections instead after first attempt to slide.
But this is very basic CSS and it doens't make any sense why it is causing it :)

I will continue tomorrow when I have access to someone with affected phone ...

[kovinet]

I have been debugging more and this is really weird.

I have been deleting chunks of html out and when I removed some html from one of slides it started working fine. So i assumed that chunk is the problem, so I removed other slides and just kept the problematic slide but it then works on its own!

It seems like that when size of total html exceeds certain limit there is some kind of memory leak and it starts crashing on new iPhones.

So even if I keep all the CSS and keep html that is crashing the site, but isolate it, it then works. But when I put it together with other content then it starts crashing. 😞

[kovinet]

I have come to the point where I have in one of the slides the code:

<h1>Jane Dough</h1>

and everything work, now if I just duplicate this div couple of time:

<h1>Jane Dough</h1>
<h1>Jane Dough</h1>
<h1>Jane Dough</h1>
<h1>Jane Dough</h1>
<h1>Jane Dough</h1>

I breaks (crashes the browser).

But if I just keep this slide and remove some other slide then this works. Like some stack overflow happens or something, crazy really....

[kovinet]

After changing some paddings etc. I have finally got some different error message from Safari:

Sorry for spamming here, I hope this also helps you to improve the script in the future, because there seems to be some issue. I suspect there is a memory leak regarding scroll events...

[kovinet]

I have come to the conclusion that if there is X number of slides that have content overflowing the section, so that inner scrollbar appears in too many sections / slides, then it starts to crash. So there is no specific CSS that is at fault, but for example if I add some padding-top so that content doesn't fit in many of the sections it is reason enough for it to crash the browser...

Like there is too many processes manipulating the scroll or something in this direction.

As mentioned before, this only happens in iPhone 14, but it never happened to far on iPhone 11 or iPhone 7. Same for Chrome and Safari. There is also no issue on Android devices or desktop.

[alvarotrigo]

Interesting findings!

It might be related to this issue:
https://stackoverflow.com/q/17824060/1081396

As a workaround, you can use scrollBar: true.
If you still prefer not to show the scrollbars, then you can use css3:false.

And if none of those solutions fit you well, then you can try reducing the number of vertical sections.

[kovinet]

Thanks for the hints. I have now somehow managed to make it work, mostly by removing some paddings from elements inside slides so they fit without scrollbar. No crashes for now on few tested phones, I hope it won't randomly crash on others - then I will try with the tips provided.

[VoHoTv]

Experiencing the same issue for this website. iPhone 12 pro with iOS 16.6.1

[alvarotrigo]

Experiencing the same issue for this website. iPhone 12 pro with iOS 16.6.1

Did you try removing sections? See if that's related?
Or using anchors: []?

[joelstein]

We have a similar problem with a page with 63 slides powered by fullPage.js, all with background images, a background overlay, animating text, etc.

And it only seems to crash on newer iPhones. I have an older iPhone 8, and it doesn't crash.

I also found this discussion, which makes me think the page is somehow using too much memory or GPU:

https://stackoverflow.com/a/77119170