Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Element not being drawn correctly when scaled on Android Chrome

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 have a simple tween that tweens the opacity and scale of an element.

It's made up of a number of child divs, some with with background images

TweenLite.fromTo(elm, 1, {
    scale: 0,
    opacity: 0
    delay: delay, 
    scale: 1,
    opacity: 1,
    ease: Power4.easeInOut 

Here's a video showing the problem.



@0:01 - The above tween is run

@0:04 - I run another tween which just returns the scale and opacity to 0

@0:10 - I set the elements display property to none

@0:15 - I set the elements display property to block

@0:19 - Tween scale and opacity to 0

@0:23 - Tween scale and opacity to 1


So at @0:15 it's rendered correctly.

but again @0:23 is not again.


I assume this is actually a browser issue, it doesn't think i needs to redraw the element after the scaling.


The odd thing is though that if I only ever scale from .5 instead of 0 then there are no rendering issues.

TweenLite.fromTo(@elm, 1, {
    scale: .5,
    opacity: 0
    delay: delay, 
    scale: 1,
    opacity: 1,
    ease: Power4.easeInOut 

(it's all fine on chrome desktop)

Link to comment
Share on other sites

Hi Rob,


I remember something like this happening some time ago, but in desktop actually. The solution, as you point, is not start the scale from zero. Because of that I always start with a very tiny amount, like 0.0001. Even with the element's opacity set to one is almost impossible to see the element, since your starting the opacity at zero is even better.


I rememberstumbling on this while creating a vertical scale from zero, the browser flipped the element when the scale was zero.


Finally as you mention this is a browser rendering issue and not GSAP related.



  • Like 1
Link to comment
Share on other sites

Hello Rob,


I have seen this before, and like Rodrigo suggested, it looks like a browser rendering issue.


Just a couple of questions:

  • What Android version?
  • What Android device?
  • What browser on Android.. Chrome Mobile or Stock browser?
  • What does your code look like for changing the CSS display property before changing opacity and scale?
  • Is the setting of the display property being set in the onComplete or some other way, so you make sure that the animation is complete before applying display none or display block?
  • Also i notice the element starts round, which means you are using border-radius? if so.. do you have the border radius set to pixels or percent? if they are set to a pixel amount, i would reccomment setting the border-radius to 100% so the element keeps its circular shape.
  • Have you tried setting force3D:true to force hardware acceleration?

But I can help test this on my Android device (Galaxy S3 - 4.3 Jelly Bean) if you have a link to the animation?


Or better yet.. if you could create a reduced codepen demo example, so we can see your GSAP code (html, css, js) in action, in a live editable environment to test and debug.


Here is a video tut by GreenSock on how to create a codepen demo example.


Thanks! :)

  • Like 1
Link to comment
Share on other sites

Hey guys, firstly, thanks for your replies, really appreciate you taking the time to help with this, as I totally agree, it's not really a GSAP issue.


However you guys are very knowledgable so was hoping this was something that's come up for someone else.


The icon im scaling is part of a game UI.

The game is written mostly in javascript with canvas.


However some of the UI components are DOM.

This particular item I'm scaling is a DIV.


It has some other elements inside, but essentially it's a DIV, the visual that i'm scaling which you're looking at in the video is just a DIV with a background-image.


The element is placed over the top of the game running in the canvas underneath.


I'm sorry I should have made a live example, the specific code is deep within my game code so I'll try to extract it and recreate the issue in isolation on codepen.


Thanks again


Link to comment
Share on other sites

Hey Rob,


You're welcome, as always we're ready to help as much as possible in tackling down any issue.


As you presumed, nobody reported this issue before, so it's a bit of an unknown path, at least for me.


I set up a simple codepen based on what you described. A <div> element with a background image using pure JS and tested it on Chrome 34 for Android in a Sony smartphone running Android 4.0.4 ice cream sandwich and a Motorolla smartphone running Android 4.3 jelly bean, and it doesn't give me any issue. Also tested it with Firefox 29 and the phones' stock browser and seems ok.


Editor View

See the Pen zDfyp by rhernando (@rhernando) on CodePen


Full Screen:



I think that somehow animating a DOM element on top of a canvas element could be causing this issue.


Another possibility could be what Jack described in this post reply:




Perhaps you could try using css background properties in the element's inline style using a set() instance, such as background-size, in order to force the background to have certain dimensions all the time:

  backgroundPosition:"50% 50%"

Finally I don't know if you tried force3D on that specific tween. Perhaps creating a GPU layer could solve the issue. If nothing else works, maybe creating an image element in the canvas.



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