谷歌浏览器边框半径问题

Question

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

尽管网站工作正常，我最近注意到圈子不再是在谷歌浏览器的圈子。实际上在所有州都是平等的。

我已通过本网站查找找到任何答案，但没有一个似乎工作。我曾尝试使用所有浏览器的边界半径代码;

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

但它似乎没有拿起它，即使当我使用！重要标签。我也尝试使用像素而不是百分比。当我使用检查元素工具时，我可以添加这个;

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

它工作在正常状态，但是当我把它放到我的站点css中时，它不会出现。

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

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

感谢，

Answer 1

这看起来是一个已知的bug在Chrome我害怕。它的主要转变有关，当过渡期间，被涂上了DOM父的订单/孩子变成：

https://code.google.com/p/chromium/issues/detail?id=157218

作为一种替代你也许可以做，包括边框和阴影增加整个圈子尺寸。但我不认为这是你想要的效果。

请在堆栈溢出时查看此主题：Bug with transform: scale and overflow: hidden in Chrome

Answer 2

新增

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

去除

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