Jump to content
GreenSock

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

Bizzare behaviour from overflow:hidden

Go to solution Solved by Jonathan,

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 guys I have a weird situation and I cannot explain what is happening

 

Super simple, I basically create a div and set it to have rounded corners. Then set the overflow to hidden.

 

Next I pop an image inside and all I want it to do is rotate inside, but it's glitchy. 

 

With the codepen URL for example you can see (while animating) the div temporarily looses it's overflow hidden the and hand is revealed on top. 

 

With our website: http://iplabs.com.au/amaysim/history-of-the-mobile-phone/ you can see it sitting there on top of the circle.

 

Removing TweenMax instantly fixes the issue. 

 

 

Any ideas? 

 

Thank you! 

See the Pen pEbjaV by electrolegs (@electrolegs) on CodePen

Link to comment
Share on other sites

Hello buddy! I am trying to find solution for your experience. I noticed that you are tweening hand from outside of circle to inside??? I think that's weird idea.
It will be render from outside of to inside of your circle. Try to cut the image in the same size of your circle so there will be no issue like that. I try to clip this but it doesn't work. Thanks!

Link to comment
Share on other sites

Hi Fagan!

With firefox on mac i can't see the problem you told on the codepen.

Anyway, why don't you clip it? so there is no more problem?

Link to comment
Share on other sites

Hi Fagan!

With firefox on mac i can't see the problem you told on the codepen.

Anyway, why don't you clip it? so there is no more problem?

 

Hey buddy! even you clip it the problem is there! He trying to fit the image from outside overflow into inside overflow of circle which is not good idea (for me) try to crop your image in same size of your circle. That's only my suggestion. Let's wait for GSAP legends to find the better solution to your awesome question!

  • Like 1
Link to comment
Share on other sites

  • Solution

Hello fagan and welcome to the GreenSock forum!

 

This is not a GSAP bug, but the way transforms work when rendered in Chrome / Safari (webkit based browsers).

 

What is happening is that when you rotate the element it gets put on its own rendering layer. But overflow:hidden is ignored since it is not on a rendering layer like its transformed child. So to solve this you have to make #circle with the overflow property be placed on its own rendering layer. Then overflow:hidden will work due to having the transformed element #circle be composited on its own rendering layer like its transformed child <img>.

 

See the Pen LRkxxo by jonathan (@jonathan) on CodePen


 

#circle {
  overflow:hidden;
  
  /* places parent (#circle) on its own rendering layer so overflow hidden is honored */
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}

You can check out my StackOverflow answer that explains this.

 

http://stackoverflow.com/questions/16687023/bug-with-transform-scale-and-overflow-hidden-in-chrome/35438838#35438838

 

So to recap .. make sure the if you use overflow hidden then do that little fix above to make sure the parent (#circle) is pushed on to its own rendering layer like your transformed rotated <img> child.

 

Hope this helps! :)

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Nice work, Jonathan!

  • Like 1
Link to comment
Share on other sites

Hello fagan and welcome to the GreenSock forum!

 

This is not a GSAP bug, but the way transforms work when rendered in Chrome / Safari (webkit based browsers).

 

What is happening is that when you rotate the element it gets put on its own rendering layer. But overflow:hidden is ignored since it is not on a rendering layer like its transformed child. So to solve this you have to make #circle with the overflow property be placed on its own rendering layer. Then overflow:hidden will work due to having the transformed element #circle be composited on its own rendering layer like its transformed child <img>.

 

See the Pen LRkxxo by jonathan (@jonathan) on CodePen

 

#circle {
  overflow:hidden;
  
  /* places parent (#circle) on its own rendering layer so overflow hidden is honored */
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}

You can check out my StackOverflow answer that explains this.

 

http://stackoverflow.com/questions/16687023/bug-with-transform-scale-and-overflow-hidden-in-chrome/35438838#35438838

 

So to recap .. make sure the if you use overflow hidden then do that little fix above to make sure the parent (#circle) is pushed on to its own rendering layer like your transformed rotated <img> child.

 

Hope this helps! :)

 

Good Job Jonathan!

  • Like 1
Link to comment
Share on other sites

One other idea- overflow: hidden; on body or html tags could hide the scrollbar. I was solving this problem by applying overflow-x: hidden; to the div itself.

Link to comment
Share on other sites

Hello 335,

 

Applying overflow-x hidden would not solve this WebKit overflow bug. The issue wasn't that scrollbars were showing up or not! ;) It was that overflow:hidden was not being honored due to its child having a CSS transform, which is placed on its own composited rendering layer. But the parent with overflow hidden was not rendered on its own composited layer, causing overflow hidden to break. That is why adding translateZ works and allows overflow hidden to work as expected, which is to hide / clip around the circle. :)

Link to comment
Share on other sites

Hello Jonathan!

 

I evidently misunderstood the question! Even though I have operational knowledge of html/css, the more I learn the more I see that in themselves these are very powerful languages and that I should study these more! The trouble with me is that I am not afraid to ask simple questions! :)

 

I am a photographer and I would like to learn all these techniques in order to make interactive multi-media presentations.

 

I read a post by PointC and I do have to agree that this forum is a very cool and supportive community of people trying to push the limits of the web.

 

I was learning GSAP for a while without thinking I should join this forum. I am very glad I did and I am sure I will progress more rapidly!

 

Thanks for sharing your knowledge with us!

Link to comment
Share on other sites

No worries.. a great site to learn, which is my favorite is the Mozilla Developer Network (MDN). Very up to date info on all the various web technologies. I hope you find it as useful as I do :)

 

https://developer.mozilla.org/en-US/

 

CSS

 

https://developer.mozilla.org/en-US/docs/Web/CSS

 

JS

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript

 

GSAP JS Jump Start

 

https://greensock.com/jump-start-js

 

Happy Tweeting :)

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