Why is my CSS animation breaking my overflow?

Question

I've spent soo long trying to figure this out, and I cant see any reason why this is causing this error. You can see, that the sun and land are visible outside of my scene div which has an overflow of hidden. Now if you go to the classes below and comment out that animation it will appear correctly.

.wing1 
.wing2

Why on earth is it acting this way? Is it because I have animation inside a div I am already animating?

.bird *is animated*
    .wing1 *is animated*
    .wing2 *is animated*

Pen: http://codepen.io/LukeD1uk/pen/LVWXmB

Any insight would be great.

I can't reproduce it, on latest FF its working ok, issue is on Chrome. — Drops, Jun 04 '15 at 14:10
@Drops is right, seems like a browser issue. you may have to create an overlay to make your circle — zgood, Jun 04 '15 at 14:12
All working fine here. Latest Firefox and latest Chrome, IE 11, Windows 8.1, no problems. — connexo, Jun 04 '15 at 14:14
Why don't you try css clipping instead of `overflow: hidden`? — Drops, Jun 04 '15 at 14:21
@LukeD1uk Check this out : http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera — divy3993, Jun 04 '15 at 14:22
@divy3993 Thanks that worked a treat, submitted that as an answer and I will approve it. :D `-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); ` — LukeD1uk, Jun 04 '15 at 14:34
@Drops well this is related to animations, so people will find this through other search results. — LukeD1uk, Jun 04 '15 at 14:37

score 1 · Accepted Answer · answered Jun 04 '15 at 14:42

CSS in your scene class

 position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */

Why is my CSS animation breaking my overflow?

1 Answers1