Jump to content
GreenSock

PixeledCode

Android resize event issue

Go to solution Solved by GreenSock,

Recommended Posts

Hi, I'm actually facing some issue that's only reproducible on android phones. I have tested on iPhone, iPad and desktop but there is no issue there.

Problem: While using scrolltrigger pin on an input field, android devices loses the ability to keep their focus on that field. I found some related issues on Stackoverflow, here and here. I am fighting this issue for a week and after losing the battle, I need some help regarding it.

 

Here is the codesandbox to check code and to open output on android.

 

Any help is appreciated. Thanks!

Link to comment
Share on other sites

Howdy, @PixeledCode. Are you saying you think this is a ScrollTrigger issue? If you remove ScrollTrigger from the equation, do you still see the issue? We really try to keep these forums focused on GSAP-specific questions, that's all. We spend an inordinate amount of time helping people for free here and we have limited resources :)

  • Like 2
Link to comment
Share on other sites

7 minutes ago, GreenSock said:

Howdy, @PixeledCode. Are you saying you think this is a ScrollTrigger issue? If you remove ScrollTrigger from the equation, do you still see the issue? We really try to keep these forums focused on GSAP-specific questions, that's all. We spend an inordinate amount of time helping people for free here and we have limited resources :)

ah yes, I understand and I really appreciate what you guys are doing. And yes, if I remove the scrolltrigger from input field, I lose the pinning ability but then it works perfectly on android as well. So what I think is that there is some issue in android maybe and gsap scrolltrigger is triggering it?

Link to comment
Share on other sites

I have a vague memory of some bug in Android (not GSAP/ScrollTrigger) that caused the browser to basically treat the hit area for position: fixed elements as if it isn't position: fixed. In other words, the interactive hit area scrolls up out of the viewport even though the element itself doesn't! Super weird, right? And I could be remembering incorrectly here, but I simply cannot imagine how ScrollTrigger could have anything to do with this issue. I'd bet that if you remove ScrollTrigger from the equation but just nest your element inside another one (similar to what pinning does) and set your element to position: fixed and you'll see the issue happen (proving it's not ScrollTrigger). 

 

Have you tried wrapping your element in another <div> or something? I wonder if Android's bug is specific to inputs that have position: fixed or something, but if you put them in a parent <div> that's position: fixed instead, maybe it'll help? If not, try doing that and adding a slight transform, even if it's y: 0.01. The key is to find something that triggers the browser to render properly. 

Link to comment
Share on other sites

18 minutes ago, GreenSock said:

I have a vague memory of some bug in Android (not GSAP/ScrollTrigger) that caused the browser to basically treat the hit area for position: fixed elements as if it isn't position: fixed. In other words, the interactive hit area scrolls up out of the viewport even though the element itself doesn't! Super weird, right? And I could be remembering incorrectly here, but I simply cannot imagine how ScrollTrigger could have anything to do with this issue. I'd bet that if you remove ScrollTrigger from the equation but just nest your element inside another one (similar to what pinning does) and set your element to position: fixed and you'll see the issue happen (proving it's not ScrollTrigger). 

 

Have you tried wrapping your element in another <div> or something? I wonder if Android's bug is specific to inputs that have position: fixed or something, but if you put them in a parent <div> that's position: fixed instead, maybe it'll help? If not, try doing that and adding a slight transform, even if it's y: 0.01. The key is to find something that triggers the browser to render properly. 

yeah, it's really weird. I tried removing scrolltrigger and tried both scenarios:

1. Put the input inside a div and gave that div position: fixed

2. Give position: fixed to input itself without any enclosing div.

In both cases, input  field worked on android. So I'm not sure position is messing with input anymore...

Link to comment
Share on other sites

  • Solution
12 hours ago, PixeledCode said:

yeah, it's really weird. I tried removing scrolltrigger and tried both scenarios:

1. Put the input inside a div and gave that div position: fixed

2. Give position: fixed to input itself without any enclosing div.

Yeah, what I mean is try reproducing just the HTML/CSS structure of what ScrollTrigger is doing for the pinning. Remove ScrollTrigger completely. See if that HTML/CSS structure is causing the problem (it must be). Then try to isolate further. See what properties you can alter to correct the behavior. 

 

ScrollTrigger doesn't do anything with focus. Feel free to check the source code. If you can't reproduce the problem apart from ScrollTrigger, my best guess would be that Android has a bug related to merely checking the scroll position or something like that (perhaps that causes it to lose focus). Try running this and seeing if it helps at all: 

ScrollTrigger.config({syncInterval: 999999999});

I kinda doubt that'll do anything, but if it does solve things that means that merely checking the scroll position is triggering the bug. 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

13 hours ago, GreenSock said:

Yeah, what I mean is try reproducing just the HTML/CSS structure of what ScrollTrigger is doing for the pinning. Remove ScrollTrigger completely. See if that HTML/CSS structure is causing the problem (it must be). Then try to isolate further. See what properties you can alter to correct the behavior. 

 

ScrollTrigger doesn't do anything with focus. Feel free to check the source code. If you can't reproduce the problem apart from ScrollTrigger, my best guess would be that Android has a bug related to merely checking the scroll position or something like that (perhaps that causes it to lose focus). Try running this and seeing if it helps at all: 


ScrollTrigger.config({syncInterval: 999999999});

I kinda doubt that'll do anything, but if it does solve things that means that merely checking the scroll position is triggering the bug. 

wow, so this worked! I tried searching docs for syncInterval but couldn't find anything. What exactly is it doing? Should I be using it in production? Thank You!!

Link to comment
Share on other sites

Glad it helped! Very strange, though, that Android has a bug that causes the <input> to lose focus simply because the scroll position is read. 🤷‍♂️

 

I added some docs now. Sometimes I build features in that I intentionally don't document initially just to see if it's even needed. Then, if the need arises, the feature is already baked in and we can just put some docs around it. If the feature never ends up really being helpful in the real world, we can quietly remove it :)

  • Like 1
  • Thanks 2
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.
×