问题 CSS3 缩放变换和溢出：在 Safari 上隐藏答案

【问题标题】：Probleme CSS3 scale transform and overflow:hidden on Safari问题 CSS3 缩放变换和溢出：在 Safari 上隐藏
【发布时间】：2014-01-13 09:42:40
【问题描述】：

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

非常感谢！！

（对不起我的英语不好）

【问题讨论】：

标签： css safari overflow scale

【解决方案1】：

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

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

【讨论】：

是的，非常感谢您）但是它是如何工作的呢？它怎么知道半径是多少？

【解决方案2】：

我使用 clip-path 来解决这个问题，因为它完全符合您的预期：剪辑它定义的区域之外的任何内容。如果您使用 content-box 作为值，它将保留您的边框半径：

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

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

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

【讨论】：

【解决方案3】：

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

解决办法

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

在 OS X (11.0.1) 的 Safari 中运行良好，但它破坏了 Chrome (62) 中的抗锯齿功能。

Safari 似乎已经放弃了对

的支持

clip-path: content-box;

但不是为了

-webkit-clip-path: content-box;

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

【讨论】：