css 'fixed' broken when in a scaled div

[beamish 2 Likes (Newbie)]

Hi all,

 

I've encountered a strange situation: when an item whose css position is set to 'fixed' is placed within another div that has been scaled using TweenMax, the fixed item is no longer fixed.

 

Any ideas?...

 

Thanks for the great work !

 

Elior

See the Pen NqdEjx by anon (@anon) on CodePen

[GreenSock 18,565 Likes (Superhero)]

Hm, what makes you think it's no longer fixed? From what I can tell, it's behaving exactly as expected, but I wonder if maybe you're visualizing things differently than they're supposed to work. I'd suggest adding a 1px border to your element so you can see its bounds and how it is scaling. Remember, the CSS spec dictates that elements scale from their center by default. It's doing exactly that from what I can tell. Maybe you meant to set transformOrigin:"left top"? 

[beamish 2 Likes (Newbie)]

This is weird!  I ran the codepan on IE and it works well, the same codepen on Chrome doesn't work !  

[GreenSock 18,565 Likes (Superhero)]

Worked great for me in Chrome (as far as I could tell at least). 

[beamish 2 Likes (Newbie)]

I'm using the latest version of chrome.

 

When I scroll the output window of the codepen in chrome the red box scrolls too..  when I do the same in IE the red box remains fixed...

[beamish 2 Likes (Newbie)]

furthermore, when I comment out the single line in the JS window then the red box does not scroll and remains fixed (in chrome)

[GreenSock 18,565 Likes (Superhero)]

Oh, now that I looked more closely at how you set things up, that's a pretty dicey way to do it. Hm. I would not expect that to work, and I'm kinda surprised IE worked for you. I'm not an expert on the spec or how this particular scenario is SUPPOSED to render, but it strikes me as an edge case that's rather complicated. 

 

You've got an element that's in the normal document flow and you apply a transform to that, but then you make one of its children position: fixed. Are you expecting it to be affected by the scale/transform, but not its parent's positioning? It's a mind-bender. I'd imagine you'd have to pick one - either it's affected by its parent or it's not.

 

I'm not entirely sure what your goal is with the overall layout/animation, but if I were you, I'd probably set things up differently. 

 

And for the record, this has nothing to do with GSAP - you can apply a regular CSS transform and it does the same thing. 

[beamish 2 Likes (Newbie)]

Thanks for the support. I want the fixed item to be scaled yet remain fixed (even if it's fixed position is different after the scaling).  And I checked, you're right that it has to do with CSS transform and not with GSAP, so perhaps this is not the forum to discuss this further.

 

Thanks again.

[GreenSock 18,565 Likes (Superhero)]

I suspect you'll need to reconfigure the way you're nesting things in your HTML so that the thing you want "fixed" is at the root level. Or perhaps just add position:fixed to the container element that you're scaling. (?) 

 

Good luck.