1

Mac での chrome または safari ブラウザーのレンダリングに問題があります。レイアウトは次のようになります。

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

そして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;}

ここでライブで見ることができます -> www.advicity.ro

円にカーソルを合わせると、青い背景が隠れたままになりません。これは特定のバグであるため、私の検索は制限されており、見つけたすべての回答で修正されませんでした。

何か案は ？（機能するものがある場合は、説明が将来の参考に役立ちます）

ありがとう！

4

1 に答える 1

1

国境半径のトリミングに関しては、Safariは壊れています:-s

あなたの速い解決策は、に追加することです

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

また、border-radius をピクセルからパーセンテージに変更します。円が必要な場合は、次のようにするのが最善の方法です。border-radius:50%;

次に、main_wrapper を 950 から 980px にします。:) そして、あなたは完了です :)

もう 1 つのより複雑な解決策は、マスクを使用することです。詳細はこちら: https://www.webkit.org/blog/181/css-masks/

于 2013-07-03T16:50:29.947 に答える