Question

我在Safari上有缩放变换效果和溢出的问题。当我在div内容上使用此效果时，溢出不适用于圆形容器。

这里是我的代码：

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

非常感谢你！

（抱歉我的英语不好）

Answer 1

如果在-webkit-mask-image类中包含带有径向渐变的.container，则会创建一个遮罩，以防止子元素的内容显示在父元素的边界之外。这很像图形应用程序中使用的图层蒙版。

-webkit-mask-image: -webkit-radial-gradient(white, black);

Answer 2

我使用剪辑路径来克服这个问题，因为它完全符合您的期望：剪切它定义的区域之外的任何内容。如果您使用内容框作为值，它将保留您的border-radius：

.container
{
    clip-path: content-box;
}

Here's a more detailed breakdown of what you can achieve with clip-path.

编辑：删除了对-webkit前缀的引用，因为这不是必需的。此外，内容框值仅在Safari中有效，但这是我唯一看到原始问题的浏览器。

Answer 3

我在Safari中遇到了转换问题，需要更新。我的问题与倾斜容器中的反向偏斜背景图像有关。

的解决方案

-webkit-mask-image: -webkit-linear-gradient(white, black);

在Safari for OS X（11.0.1）中运行良好，但它打破了Chrome中的抗锯齿（62）。

Safari似乎已经放弃了对

的支持

clip-path: content-box;

但不适用于

-webkit-clip-path: content-box;

尽管检查员声称不需要-webkit-前缀。

问题CSS3规模变换和溢出：隐藏在Safari上

3 个答案: