Bizzare behaviour from overflow:hidden

[fagan]

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

[WarenGonzaga]

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!

[gioroc]

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?

[WarenGonzaga]

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!

[Jonathan]

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!

[Carl]

Nice work, Jonathan!

[WarenGonzaga]

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!

[fagan]

Thank you to everyone for your input. 

[335]

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.

[Jonathan]

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.

[335]

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!

[Jonathan]

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