Share Posted June 1, 2015 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 Link to comment Share on other sites More sharing options...
Share Posted June 1, 2015 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 More sharing options...
Author Share Posted June 1, 2015 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 More sharing options...
Share Posted June 1, 2015 Worked great for me in Chrome (as far as I could tell at least). Link to comment Share on other sites More sharing options...
Author Share Posted June 1, 2015 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 More sharing options...
Author Share Posted June 1, 2015 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 More sharing options...
Share Posted June 1, 2015 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 1, 2015 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 More sharing options...
Share Posted June 1, 2015 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now