Probleme CSS3 scale transform and overflow:hidden on Safari - css

Question

i have a problem with scale transforme effect and overflow on Safari.
When i used this effect on a div content, the overflow not work on a rounded container.
here my code:
.container{
width:100px;
height:100px;
border-radius: 50%;
background:none;
z-index:100;
box-shadow:
inset 0 0 0 6px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
overflow:hidden;
-webkit-transition:all .9s ease-in-out; // Chrome Safari
-moz-transition:all.9s ease-in-out; // Mozilla
-o-transition:all.9s ease-in-out; // Opéra
-ms-transition:all .9s ease-in-out; // IE
transition:all.9s ease-in-out;
}
.container:hover .scaler
{
-webkit-transform: rotate(380deg) scale(11);
-moz-transform: rotate(380deg) scale(11);
-o-transform: rotate(380deg) scale(11);
transform: rotate(380deg) scale(11);
filter: alpha(opacity=0);
opacity: 0;
width:100px;
height:100px;
border-radius: 50%;
}
.scaler{
width:100px;
height:100px;
font-size:36px;
border-radius: 50%;
z-index:-999;
line-height:100px;
vertical-align:middle;
text-align:center;
background:#0066FF;
color:#CCCCCC;
-webkit-transition:all .4s; // Chrome Safari
-moz-transition:all .4s; // Mozilla
-o-transition:all .4s; // Opéra
-ms-transition:all .4s; // IE
transition:all .4s;
}
<div class="container">
<div class="scaler">HI</div>
</div>
thank you very much!!
(sorry for my bad english)

Answer 1

If you include -webkit-mask-image with a radial gradient on the .container class, this will create a mask which will prevent the content of the child element being shown outside the bounds of the parent. This is much like a layer mask used in a graphics application.
-webkit-mask-image: -webkit-radial-gradient(white, black);

Answer 2

I used clip-path to overcome this problem, as it does exactly what you'd expect: Clips anything outside the region that it defines. And it will retain your border-radius if you use content-box as the value:
.container
{
clip-path: content-box;
}
Here's a more detailed breakdown of what you can achieve with clip-path.
Edit: Removed reference to the -webkit prefix as this isn't necessary. Also, the content-box value is only valid in Safari, but this is the only browser I saw the original problem in anyway.

Answer 3

I came across the transform problem in Safari, and it needs an update.
My problem had to do with a counter skewed background-image in a skewed container.
The solution with
-webkit-mask-image: -webkit-linear-gradient(white, black);
works good in Safari for OS X (11.0.1), but it breaks the anti-aliasing in Chrome (62).
Safari appears to have dropped support for
clip-path: content-box;
but not for
-webkit-clip-path: content-box;
despite the inspector claims that the -webkit- prefix is not needed.