Jump to content
Search Community

borderRadius in desktop Chrome and Safari

danehansen test
Moderator Tag

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

I am working on developing some "star wars" type wipes for use as page transitions. i've got all 8 directions plus two circular ones going on so far. one circular one grows a small circle from the middle of the page to fill the whole page, masking on the new content. the other starts large and shrinks small to mask away the old content. the latter works in all browsers. but when i start small adn go big, it breaks in Chrome and Safari on the desktop only. yes, i am saying that it works fine on the mobile versions. here is a link to my project so far which is running a random transition from an array of 10 transitions:

http://danehansen.com/temp/publik/wipes/

and here is a link to a special version i put up that is only the small to big circle that i am having problems with:

http://danehansen.com/temp/gs/wipes/

 

i am not sure where this bug lies, but TweenLite is one of my suspects. i also suspect that this could be one of the odd situations where the browser is not visually updating.

 

another couple of oddities i have noticed:

i altered the code to only grow the circle mask to half its end diameter, then commented out the onComplete function... in Chrome the circle mask is a square during the tween, then ends as a circle when the tween is done. in Safari, the mask is a square during the tween also, but when it ends it turns into an odd part circle part rectangle shape, then if i drag the corner of the browser to change the size the mask corrects itself into a nice circle.

Link to comment
Share on other sites

Hi,

 

Maybe you could try setting your circle wipe with a border radius of 50% and don't modify it during the tween in order to keep it as a circle all the time, because right now you're starting with a square and you're ending with a circle. I tell you this because I've experienced some sync problems in webkit when tweening shadow and scales. Another solution could be to create separate tweens for both properties, that is one tween for the size (height and width) and another for the border radius and then put both of them inside a Timeline so you can control both in a simpler way.

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

There's a bug in Chrome and Safari (completely unrelated to GSAP) that causes them to ignore (or very intermittently render) borderRadius in this type of scenario (when the div contains other elements). The only solution I've found is to apply a border which forces the webkit browsers to pay attention to the edges, thus render the rounded corners. You could make the border use a transparent color, but it must be at least 1px thick. Try adding this:

 

TweenLite.set(yourElement, {border:"1px solid rgba(0,0,0,0)"});

Again, the bug has nothing to do with GSAP - it's just a browser quirk. For example, if you've got a div that we'll call "box" and there's just an <img> inside of the div:

 

box.style.WebkitBorderRadius = "20px";
//if you remove the following line, the border radius often won't render:
box.style.border = "1px solid red";

Does that clear things up for you? 

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

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.
×
×
  • Create New...