Jump to content
Search Community

css 'fixed' broken when in a scaled div

beamish 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

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

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

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