Jump to content
Search Community

Mobile android browser hangs with ScrollSmoother

VoinG test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...