悬停时的边界半径延迟

Question

Border-radius 在悬停时需要半秒左右的时间才能加载，因此方形 div 在校正为校正后的圆形之前会显示。

代码在 Firefox 中运行正常，但在 Safari 或 Chrome 上运行不正常。

这是 link。将鼠标悬停在 3 个圆圈中的任何一个上以查看 Safari 或 Chrome.

中的错误

为什么会有这种延迟？

谢谢！

Answer 1

您是否尝试过在隐藏时也将 div 的边框半径设置为 100%？

只是在网络检查器中使用您的代码，我将元素设置为具有边框半径，并且解决了方形故障。试试这个：

.webcircle,
.mask {

  border-radius: 100%;

}

悬停时触发放大效果时，圆圈会稍微被截断。如果你设置了 overflow: visible to the parent element，它应该按照你喜欢的方式运行，并准备好完成细节。

Border-radius delay on hover