Probleme CSS3 scale transform and overflow:hidden on Safari

问题

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)

回答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);

回答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.

回答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.

来源：https://stackoverflow.com/questions/21087979/probleme-css3-scale-transform-and-overflowhidden-on-safari

标签

css

safari

overflow

scale