溢出：以边框半径隐藏在 Safari 上不起作用

Question

我必须制作一个隐藏::before 的按钮，该按钮显示在:hover 上。该动画在 Chrome、IE 和 Firefox 上运行良好，但我在 Safari 上遇到了一个奇怪的问题。

溢出：隐藏正在工作，但没有边界半径。

你应该在 safari 中运行 fiddle 来查看这个问题。

谢谢！

.btn{
  border-radius: 3rem;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-weight: 400;
  font-family: arial;
  overflow: hidden;
  position: relative;
  padding: 0.8rem 2.5rem;
  text-decoration: none;
  }

.btn-primary{
  background-color: blue;
  border-color: blue;
  color: white;
}

.btn-primary::before{
  background-color: deeppink;
  border-radius: 50%;
  content: '';
  color: white;
  height: 100%;
  left: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  transform-origin: 100% 50%;
  transform: scale3d(1, 1.4, 1);
  transition: all 300ms cubic-bezier(0.7,0,0.9,1);
  width: 20%;
}

.btn-primary:hover::before{
  transform: scale3d(1, 5, 1);
  width: 110%;
  left: -2%;
  z-index: 0;
}

.btn-primary span{
  position: relative;
  z-index: 1;
}

<a href="#" class="btn btn-primary">
  <span>Button primary</span>
</a>

Answer 1

接受的答案有效，但确实消除了盒子阴影。我在github post 中看到的一条评论说，它也可以通过创建新的堆叠上下文（将元素移动到新的绘画层）来修复。这可以通过像

这样的小技巧来实现

transform: translateZ(0)

就我而言，overflow 和 box-shadow 都在使用此解决方案。我希望它也可以帮助其他人。

Answer 2

所以我在https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b 上发现了一个小技巧来解决这个问题

只需将此行添加到带有溢出的元素：

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

如果有人找到其他解决方案，请告诉我 :)

.btn{

  /* Add this line */
  -webkit-mask-image: -webkit-radial-gradient(white, black);

  border-radius: 3rem;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-weight: 400;
  font-family: arial;
  overflow: hidden;
  position: relative;
  padding: 0.8rem 2.5rem;
  text-decoration: none;
  }

.btn-primary{
  background-color: blue;
  border-color: blue;
  color: white;
}

.btn-primary::before{
  background-color: deeppink;
  border-radius: 50%;
  content: '';
  color: white;
  height: 100%;
  left: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  transform-origin: 100% 50%;
  transform: scale3d(1, 1.4, 1);
  transition: all 300ms cubic-bezier(0.7,0,0.9,1);
  width: 20%;
}

.btn-primary:hover::before{
  transform: scale3d(1, 5, 1);
  width: 110%;
  left: -2%;
  z-index: 0;
}

.btn-primary span{
  position: relative;
  z-index: 1;
}

<a href="#" class="btn btn-primary">
  <span>Button primary</span>
</a>

Answer 3

will-change: transform; on element with overflow: hidden; 为我解决了问题

Answer 4

这是由 Safari 使用的渲染引擎 WebKit 中的几个未解决的错误之一引起的：

• Border-radius clip of non-stacking composited descendant doesn't work
• overflow: hidden + border radius does not work when transform is added to child

正如 Simon Fraser 在第二个链接中所写：

您可以在最近的构建中解决这个问题，方法是将具有溢出：隐藏的元素设置为 stacking context（例如位置：相对，z-index：0）。

这可能是最简单的解决方案，因为与此处的其他一些答案不同，它并非不必要地introduce render layers。

Answer 5

对我来说，为带有border-radius 的项目添加高z-index 设置就足以解决问题。