Element inside the element being animated isn't visible until after animation finishes

[andrewycode]

Hello,

 

I'm experiencing a weird issue.  Please see the codepen demo attached. 

 

I am animating the "y" property of the blue div. Inside the blue div is a red div. Below the blue div is a yellow div.

When the yellow div is around 1900px or shorter (or if it doesn't exist at all), then everything works perfectly.

However, if the yellow div is around 2000px or taller, then this issue occurs:

The red div (inside the blue div) does not appear until AFTER the animation finishes running.

 

I have been looking into this for a while and I can't figure out why this is happening. Any help would be appreciated. Thanks in advance. 

 

- Andrew

See the Pen zYMQjVB by andrewycode (@andrewycode) on CodePen

[Rodrigo]

Hi,

 

Maybe it could be a rendering glitch, the GSAP part of your code looks OK and shouldn't cause the issue. Maybe try adding will-change: transform to the blue element:

.bgblue {
  background: blue;
  will-change: transform;
}

Hopefully this helps.

Happy Tweening!

[andrewycode]

37 minutes ago, Rodrigo said:

Hi,

 

Maybe it could be a rendering glitch, the GSAP part of your code looks OK and shouldn't cause the issue. Maybe try adding will-change: transform to the blue element:

.bgblue {
  background: blue;
  will-change: transform;
}

Hopefully this helps.

Happy Tweening!

 

Hi Rodrigo,

 

Thanks for your help.

Unfortunately adding the will-change: transform CSS rule to the element did not fix the issue.

However, I now realize that this bug occurs in Chrome, but not Firefox or Safari. So I guess it is a browser issue / chrome bug.

 

Let me know if you have any other suggestions or thoughts. 

 

Thanks again,

- Andrew

[GreenSock]

Did you try adding it to various elements including the parent? I've recently seen some very odd Chrome-specific rendering issues (totally unrelated to GSAP), particularly with large elements. It's like Chrome has some limit to the dimensions that it buffers or renders in certain scenarios (maybe an optimization they're trying to apply...but it breaks large things). I know that in one of those scenarios in the past, adding will-change to the element and/or its ancestor(s) seemed to resolve it. 🤷‍♂️

[andrewycode]

42 minutes ago, GreenSock said:

Did you try adding it to various elements including the parent? I've recently seen some very odd Chrome-specific rendering issues (totally unrelated to GSAP), particularly with large elements. It's like Chrome has some limit to the dimensions that it buffers or renders in certain scenarios (maybe an optimization they're trying to apply...but it breaks large things). I know that in one of those scenarios in the past, adding will-change to the element and/or its ancestor(s) seemed to resolve it. 🤷‍♂️

 

Hi Jack,

 

Thanks for your response!

I added a wrapper div around the element being animated and added will-change: transform to only that wrapper div. This fixed the issue!

 

Thanks again,

- Andrew