Question

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

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

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

谢谢！

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

will-change: transform;与overflow: hidden;的元素为我解决了问题

Answer 2

所以我在https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b

上找到了解决这个问题的小问题

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

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

如果有人找到另一种解决方案，请告诉我们。）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

上一个答案有效，但是确实可以消除阴影。我在此github post中看到的一条评论说，也可以通过创建新的堆叠上下文（将元素移动到新的绘画层中）来解决该问题。可以通过

这样的小技巧来实现

transform: translateZ(0)

在我的情况下，溢出和阴影都在使用此解决方案。我希望它也会对其他人有所帮助。

Answer 4

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

Simon Fraser在第二个链接中写道：

您可以在最近的版本中解决此问题，方法是将带有overflow：的元素隐藏到stacking context中（例如position：relative，z-index：0）。

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

Answer 5

对我来说，在具有z-index的项目上添加高border-radius设置足以解决此问题。

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

5 个答案: