Jump to content

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

css 'fixed' broken when in a scaled div

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



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

Link to comment
Share on other sites

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"? 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

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.