Jump to content
Search Community

Strange behavior on Samsung Galaxy Tab2/3

dada78 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,

I am having an odd issue. I am using the splitText plugin successfully and the animation works perfectly on all tested browsers and devices except the Samsung Galaxy Tab 2/3 (!?) The odd thing is that it only happens on the second text instance animating in ("txt2"). All other instances animate as expected...
 

I can't figure out why the line break in the "txt2"instance is being ignored on Samsung Galaxy Tab2/3 only??

 

Any ideas? Thanks!

 

 

See the Pen 5187cd1e408a03df53b53e2528473ac5 by dada78 (@dada78) on CodePen

Link to comment
Share on other sites

Hello dada78, and welcome to the GreenSock forums,

 

What is the Android version and build that is on the Samsung Galaxy Tab 2 and 3?

 

This would help us greatly in trying to narrow down the issue, since different builds and versions of Android have different render bugs.

 

I also noticed the splitText plugin version you are using is the beta version.  VERSION: beta 0.3.3

 

Have you tried using the latest version of the SplitText Plugin?

 

As well as using the latest version of TweenMax:

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>

You can usually find the Android version and build under the About Phone menu in the settings.

 

Any additional information will be greatly appreciated!

 

Thanks :)

  • Like 2
Link to comment
Share on other sites

Thanks guys, yeah I tried removing the % symbol as I was suspecting the same, but no luck. Just so odd...

 

I tested on CrossBrowserTesting Samsung Galaxy Tab 2, 4.1, Browser 4.1. Our QA team tested on Samsung Galaxy Tab 3, Android version 4.2.2, Build number is JDQ39.P5210UEUAMJ3. 

 

Thanks so much for looking into this! 

Link to comment
Share on other sites

While i wait for my friend to give me back my galaxy tab for testing today.

 

Can you do me a favor and try commenting out your letter-spacing and white-space CSS property just to makes sure those properties might be casuing the line break not to be honered. As well as seeing if with the web font the issue exists on the Galaxy Tab.

 

But I dont see this as a GSAP bug but more of maybe the combination of CSS properties used together. Usually most browser display issues comes down to CSS, and finding the right mix for all browsers to play nice. Then once i get my gallaxy tab today i will do more testing, but see if commenting out all those css properties help.

 

:)

Link to comment
Share on other sites

Ok i just tested on Galaxy Tab 2.. and it looks like you need to either remove or make the #txt2 line have white-space:normal instead of white-space:nowrap.

 

I tested in both stock android browser and google chrome mobile browser

 

See the Pen waQzPZ by jonathan (@jonathan) on CodePen

#txt2 {
 white-space: normal;
}

Does that help?

 

Resource:

 

MDN CSS white-space property: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

 

:)

  • Like 2
Link to comment
Share on other sites

Hi Jonathan,

you were spot on! The letter-spacing didn't seem to do anything, but when the white-space was changed to "normal" or any of the other values, the text would break into 3 lines. The issue is that it's breaking onto 3 lines, even though it should be 2 (there is only one line break and the text should fit onto 2 lines) , which is the issue I was having before, hence someone in this forum suggesting to use whites-pace:nowrap; which works everywhere we tested except the Samsung Galaxy Tab2/3. Boo! :-)

 

Anyway, thanks for looking into this. We might just have to ignore this device and serve a backup.

  • Like 1
Link to comment
Share on other sites

Have you tried using white-space:pre-wrap or white-space:pre-line... or you can adjust your font-size or letter-spacing, so the 2nd line fits on one line?

 

Browsers will usually treat the CSS property white-space different depending on how it calculates your text. Sometimes using the float property can collapse whitespace. but it depends on what your overall goal is.

  • Like 1
Link to comment
Share on other sites

You could also check the userAgent if its Android Stock Browser than apply the white-space:normal

if (window.navigator.userAgent.indexOf('534.30') > 0 && window.navigator.userAgent.toLowerCase().match(/android/) && window.navigator) {
   // if Android Stock browser
   TweenLite.set("#txt2",{whiteSpace:"normal"});
}

You would run this before your timeline tweens.

 

The above would only target the Android Atock Broswer, since its webkit version only goes up to 534.30. Google started to use Google Chrome Mobile as default browser, instead of Android Stock Browser for Android 4.1 and above.

 

See if that helps? :)

  • Like 2
Link to comment
Share on other sites

Yes thanks, unfortunately it boils down to the fact that the lines then break into 3 instead of 2 lines if white-space is set to normal. The font-size should accommodate for 2 lines as is. I might just need to wrap each line into a separate div...Thanks so much for helping to troubleshoot this!!

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...