溢出：隐藏边界半径不适用于 Safari

Question

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

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

您应该在 safari 中运行小提琴以查看此问题。

谢谢 ！

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

原文由 Victor Allegret 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

    transform: translateZ(0)

在我的例子中，overflow 和 box-shadow 都在使用这个解决方案。我希望它也能帮助别人。

UPD：就像 Jad Haidar 在评论中建议的一样 isolation 是专门用于处理堆叠上下文的属性：

 isolation: isolate;

原文由 Blind Despair 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

只需使用 overflow 将此行添加到您的元素中：

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

原文由 Victor Allegret 发布，翻译遵循 CC BY-SA 3.0 许可协议