1

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!

Mihai
  • 133
  • 1
  • 14
  • Please create an isolated demo on http://jsfiddle.net/, and include two screenshots in your post: One which shows what's wrong, and one that shows what you're expecting. Edit your question to include this information. Don't forget to mention the browser versions. – Rob W Jul 03 '13 at 10:21
  • have you tried the border:solid transparent on .circle_wrapper ? this could be your answer – G-Cyrillus Jul 03 '13 at 10:22
  • possible duplicate of [CSS Border radius not trimming image on Webkit](http://stackoverflow.com/questions/8705249/css-border-radius-not-trimming-image-on-webkit) – cimmanon Jul 03 '13 at 11:16

1 Answers1

1

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/

Eek
  • 1,740
  • 1
  • 15
  • 24