Hide animating element in Safari (7 and 8) in object with border-radius

[kaplan]

I'm trying to find a fix for an older version of Safari. I have some elements animating in div that I've made into a circle using border radius with an overflow hidden. It works great on the latest browsers, but in older versions of Safari the element 'breaks' out of of the div when it's animating. I've read adding a border setting to container will fix it, but it's not working when I test in Safari 7.1.4. 

 

I know this is browser but and not a GSAP issue. I'm wondering if anyone has found a good fix for this Safari issue.

 

On the plus side it works great in IE9 the overflow animating that is ... not codepen ;-P

 

 

Thanks!

See the Pen ojmbRm by kaplan (@kaplan) on CodePen

[Jonathan]

Hello kaplan,

 

I am thinking your issue is due to you using the <object> tag for your image. Is there any reason why you are not just using an <img> tag?

 

I noticed you are also missing the type attribute in your <object> tag. When using the <object> tag you should always use the type attribute so the browser knows what MIME type of content is being loaded in the object. i.e image/png

 

But if it was me i would just keep it simple and use the <img> tag for your image, especially if you want to maintain cross browser compatibility. <object> tags are known to be very buggy cross browser., which is what you are seeing in your example.

 

Also some older versions of webkit which is what safari uses, don't support the shorthand version like above. So you need to use the longhand version for it to work in older Safari versions. Older Safari and Chrome versions only support only one value for all 4 corners, Like this:

-webkit-border-top-left-radius: 60px;
-webkit-border-top-right-radius: 60px;
-webkit-border-bottom-right-radius: 60px;
-webkit-border-bottom-left-radius: 60px;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 60px;

Border-radius related CSS properties:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

But i would just use a <img> tag and not use the <object> tag due to its cross browser buggy nature! See if that helps?

 

[ohem]

I was looking at this last night and it was really bothering me; definitely a bug with Safari.  

 

The only thing I found that seems to work is this solution: http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera/10296258#10296258

 

See the Pen ZbwXeo by anon (@anon) on CodePen

[kaplan]

Thanks you guys rock! I added a few more examples to the pen and the -webkit-mask-image really does fix it!

 

Codepen is acting weird with my 4th svg and Chrome unless it's viewed in debug: http://s.codepen.io/kaplan/debug/ojmbRm

 

I also put one on my server: http://workalicious.com/fq540/svg-safari-debug/

 

@Ohem, I saw that mask thing when I first started research, but I couldn't get it working. I don't think I tried hard enough. Your example showed me the way.

 

@Jonathan, I'm using object and svgs as data and dynamically generating a whole bunch of them. I was thinking the svg data would look better and be faster than pngs and imgs, but I'm not benchmarking or anything. It's a get it done situation. 

 

thanks again!

[Jonathan]

kaplan,

 

In latest IE11 on Windows 7 64-bit.. the 4th SVG has a weird white flash on load for like the first 1-2 seconds, but animates after that.

 

And on Windows 7 64-bit, latest Chrome Version 46.0.2490.86 m, the 4th SVG is just solid black, no animating even in debug mode.

 

But glad you got it working!

[kaplan]

thanks jonathan! uh-boi... it never ends with a the browsers does it. i'll have to do some testing on those thanks!

[Jonathan]

no problem glad to help