谷歌瀏覽器邊框半徑問題

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 */ 
}