CODEWITHSUNDEEP
overflowcss-transitionscss
Mihai
Mihai

Reputation: 133

css mac webkit browser (safari / chrome) overflow hidden border radius bug

I have an issue on chrome or safari browser rendering on Mac. The layout is like this:

<a href="pdf/bus.pdf" class="circle_wrapper">
    <span class="business"></span>
    <span class="title">BUSINESS SOLUTIONS</span>
    <span class="small_title">SEE OUR BROCHURE </span>
    <div class="circle_filler"></div>
    <img src="images/image_logo.png" alt="">
</a>

and the CSS

.circle_wrapper {margin-right: 40px; float: left; width: 286px; height: 286px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background-color: transparent; position: relative; top:0; left:0; overflow:hidden; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; text-decoration: none;}
.circle_wrapper.last {margin-right:0px;}
.circle_wrapper img {position:absolute; z-index:-2; border:0;}
.circle_filler {width: 600px; height: 600px; transform: rotate(30deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); background-color: rgba(22,147,165,0.63); z-index:-1; position: absolute; top:40px; left:-380px; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s;}
.title {color: #ffffff;position: absolute; left:40px; top: 150px;width: 120px; font: 400 22px "Open Sans"; transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; text-align: center;}
.small_title {color: #ffffff;position: absolute; left:80px; top: 220px;width: 120px; font: 400 15px "Open Sans"; transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; text-align: center; opacity:0;}
.circle_wrapper:hover .small_title {opacity: 1;}

.circle_wrapper:hover .circle_filler{width: 600px; height: 600px; transform: rotate(30deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); background-color: rgba(22,147,165,0.63); z-index:-1; position: absolute; top:40px; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s;left: -150px;}
.circle_wrapper:hover .title {left: 80px;}

you can view it live here -> www.advicity.ro

If you hover over the circles, the blue background doesn't stay hidden. Given that it's such a specific bug, my search is kind of limited and all the answers I found didn't fix it.

Any ideas ? (if you have something that works, an explanation would help for future reference)

Thanks!

Upvotes: 1

Views: 4055

Answers (1)

Eek
Eek

Reputation: 1750

Safari is broken when it comes to border-radius trimming :-s

Your fast solution would be to add to

.circle_wrapper{border:60px solid #FFF; margin:-30px;}

Also, change the border-radius from pixels to percentage, If you want circle, the best way to do it is to make border-radius:50%;

And then make the main_wrapper from 950 to 980px; :) And you're done :)

The other more complicated solution is to use masks: More here: https://www.webkit.org/blog/181/css-masks/

Upvotes: 1

Related Questions