Google Chrome Border Radius问题

Question

嗨，我在这个网站上工作-http: //smudgedigital.com/animation-projects/，并且在“项目”页面上的画廊有问题。 图像都应该是一个圆圈，并且当滚动到图像上时，图像应该保持一个圆圈并具有悬停黑色状态。

但是，尽管该网站运行良好，但我最近注意到，这些圈子不再是Google Chrome中的圈子。 实际上，所有州都在广场上。

我浏览了该站点以找到任何答案，但似乎都没有用。 我尝试对所有浏览器使用边界半径代码；

-webkit-border-radius: 100%; 
-moz-border-radius: 100%; 
border-radius: 100%;

但即使我使用！important标记，它似乎也无法拾取它。 我也尝试使用像素而不是百分比。 当我使用检查元素工具时，可以添加它。

.view img {
display: block;
position: relative;
border-radius: 100%;
}

并且它可以在正常状态下运行，但是当我将其放入网站CSS时，它不会出现。

我见过有人说google只是不了解溢出：隐藏属性，它与边框半径无关，但是溢出：确实出现了。

任何帮助将不胜感激。 我已经在wordpress上建立了该网站。

谢谢，

Answer 1

添加

.view-first img {
    transition: all 0.2s linear;
    border-radius: 100%; /* added new */
}

去除

.view{
    overflow:hidden; /* removed */
}

Answer 2

恐怕这似乎是Chrome中的已知错误。 它主要与过渡有关，以及过渡期间绘制DOM时父/子的顺序如何：

作为替代方案，您可以使包括边界和阴影在内的整个圆圈的尺寸增加。 但是，我认为这不是您想要的效果。