Jump to content
GreenSock

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

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

Recommended Posts

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

Link to comment
Share on other sites

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:

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?

 

:)

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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! :)

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

no problem glad to help :)

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