Thomas Walder

Split text container is not fixed on mobile phones

Recommended Posts

I implemented a code example from codepen of split text in a bootstrap website. It’s working fine so far. But on mobile phones- android at least there is a bug. As long as the container with the split text is in action, I can move the website to the left. the bottom of the website is also flashing when split text is in action. As soon as I pass this container by scrolling down the website is fixed, even if I return to split text container. Any solution how I can fix it up from the beginning? here the link to my project at codepen

Share this post


Link to post
Share on other sites

Sorry to hear about the trouble, @Thomas Walder. It's super difficult to troubleshoot blind - I can't imagine what the problem might be, but if you post a reduced test case in codepen or something like that, we'd be happy to take a peek. 

Share this post


Link to post
Share on other sites

I see that you added a codepen project link to your post, but I'm still at a loss to understand what you're describing or if there's a GSAP-specific question we can answer for you. This kinda sounds like an issue with bootstrap (at least in your scenario) - if you remove that does everything start working as you'd expect? 

Share this post


Link to post
Share on other sites

please watch it on a mobile phone and move with the finger to the left during 'split text' is in action.  u will see that u leave the viewport.

u are right that this seems to be a booststrap issue, but I cant believe that I am the only one who tries to implement split text into a boostrap project.

Share this post


Link to post
Share on other sites

I tried on a mobile device and didn't notice any problems. SplitText simply wraps elements in <div> elements, and sets certain inline styles; I can't imagine how that could be the cause of the issue you described. We haven't had any other users report issues with Bootstrap (I've never used it myself). Also, when I tried viewing a full-page version of your demo, codepen said you had to verify your email address before that view was accessible. 

 

It sounds like maybe some kind of CSS issue/conflict with your setup in bootstrap. I wish I could see the problem so I could better answer you, but I'm at a loss. Again, I really don't think this has anything to do with SplitText itself. You're using the latest version of everything, right? (GSAP and Bootstrap)

 

Maybe what you're describing is simply that the browser is interpreting the transforms such that it thinks it needs to allow the user to scroll to the left, so maybe you could try addressing that in your CSS by setting widths and/or overflow:hidden or something like that? 

  • Thanks 1

Share this post


Link to post
Share on other sites

fu*☺ u are a crack. overflow:hidden and it's working like expected. thx for quick response and help.

Share this post


Link to post
Share on other sites

:)

 

Glad you got it working. Enjoy!

Share this post


Link to post
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.