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時父/子的順序如何：

作為替代方案，您可以使包括邊界和陰影在內的整個圓圈的尺寸增加。 但是，我認為這不是您想要的效果。