mobile device Mobile android browser hangs with ScrollSmoother

VoinG · May 1, 2023

Hello!
I have searched extensively and for a very long time, but unfortunately have not found a similar problem or solution. Unfortunately I cannot present a "normal" minimal demo, but I have created two codepens to illustrate the problem.

I apply smoothscrolling between two div's: wrapper and web.

#wrapper, #web{
  width: 100% !important;
  overflow: hidden;
}

This is the js-code

    ScrollSmoother.create({
        wrapper: '#wrapper',
        content: '#web',
        smooth: 1.5,
        effects: true
    });

In HTML I sometimes use

data-speed="0.7"

If you would please access this pen full: https://codepen.io/design4u-koeln/full/wvYrGxd with a mobile device (android / chrome in my case) and scroll up and down a bit, the browser hangs!

If I forbid smoothscrolling for mobile, this does not happen.

See the Pen xxyXOaO by design4u-koeln (@design4u-koeln) on CodePen

full: https://codepen.io/design4u-koeln/full/wvYrGxd

  let mm = gsap.matchMedia();
  mm.add("(min-width: 576px)", () => {
    ScrollSmoother.create({
        wrapper: '#wrapper',
        content: '#web',
        smooth: 1.5,
        effects: true
    });
})

Maybe someone recognises the " known pattern", why this is happening?

Thank you very much!

See the Pen wvYrGxd by design4u-koeln (@design4u-koeln) on CodePen

Rodrigo · May 1, 2023

Hi,

I forked your codepen that hangs and just added this to the HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">

And this to the CSS:

.karteien,
.karteien2 {
  height: 100vh;
  width: 400vw;
  display: flex;
  will-change: transform;
}

.karteien .gsapkarteiwrapper,
.karteien2 .gsapkarteiwrapper {
  padding: 100px 0;
  height: 100%;
  width: 100vw;
  will-change: transform;
}

And I'm not seeing any issues on Android.

Here is the fork:

See the Pen KKGXWoV by GreenSock (@GreenSock) on CodePen

And here is the debug link (no iframes):

https://cdpn.io/pen/debug/KKGXWoV

Give that a try and let us know if you run into any issues. If you can record a screen cast so we can see exactly what's going on.

Hopefully this helps.

Happy Tweening!

VoinG · May 2, 2023

Hello @Rodrigo and thank you very much for a such quick response!

Quote

<meta name="viewport" content="width=device-width, initial-scale=1">

Of course I have that in my code, but I thought codepen only accepts everything between <body></body>

Quote

will-change: transform;

Of course that makes sense...
Basically, I've tested this with some smartphones (Android but also iOS) and i only have the problem with the browser hanging. With my pen as well as with your fork 🤔 I did and attached a screencast - before that i cleared cache, cookies etc. but this happens pretty quickly. Sometimes I get further on the page, but then the browser just hangs after 2 seconds and not after 1. That has never happened to me, only on this one page.
Do you have any other idea how to fix this? Thank you!

VoinG · May 2, 2023

moved in a new thread

Notifications

Messages

mobile device Mobile android browser hangs with ScrollSmoother

Recommended Posts

VoinG

Link to comment

Share on other sites

Rodrigo

Link to comment

Share on other sites

VoinG

Link to comment

Share on other sites

VoinG

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members