PixeledCode Posted July 9, 2021 Share Posted July 9, 2021 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 More sharing options...
GreenSock Posted July 9, 2021 Share Posted July 9, 2021 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 2 Link to comment Share on other sites More sharing options...
PixeledCode Posted July 9, 2021 Author Share Posted July 9, 2021 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 More sharing options...
GreenSock Posted July 9, 2021 Share Posted July 9, 2021 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 More sharing options...
PixeledCode Posted July 9, 2021 Author Share Posted July 9, 2021 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 More sharing options...
Solution GreenSock Posted July 9, 2021 Solution Share Posted July 9, 2021 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. 2 1 Link to comment Share on other sites More sharing options...
PixeledCode Posted July 10, 2021 Author Share Posted July 10, 2021 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 More sharing options...
GreenSock Posted July 11, 2021 Share Posted July 11, 2021 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 1 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now