Android上的圓邊的奇怪的渲染/鉻

這裏就是我遇到https://i.gyazo.com/cb9431931ac013869393f6bbc2292bb8.png Android上的圓邊的奇怪的渲染/鉻

這裏的問題是我codepen我使用http://codepen.io/johnsonjpj/pen/jVpreB

我的問題出在我的三星Galaxy S5在Chrome版本54.0.2840.85，Android 6.01。

Firefox正確顯示邊框以及iphones顯示其按預期工作。

我很難縮小問題的範圍，但我懷疑它與我的.image邊界類的寬度有關，或者與邊界顏色有關。

可能與這些行？

.image-boundary { 
    border-top-color: #d64700; 
    border-color: #ffffff; 
    background: #002a4a; 
} 

.image-boundary { 
    position: relative; 
    width: 50%; 
    height: 0; 
    padding: 25% 0; 
    margin: 1em auto; 
    border-radius: 50%; 
    border-width: .33em; 
    border-style: solid; 
    overflow: hidden; 
}

來源

2016-12-09 Jacob J

在galaxy s5上正常工作，但在更新的時候，這個版本是什麼？ –

chrome版本54.0.2840.85，Android 6.01 –

嘗試前綴邊界半徑是這樣的：

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

如果不行嘗試單獨添加的邊界半徑，這樣的：

border-top-left-radius: 50%; 
border-top-right-radius: 50%; 
border-bottom-left-radius: 50%; 
border-bottom-right-radius: 50%;

來源

2016-12-09 17:40:22 sol

對該錯誤沒有影響。 –

您嘗試使用像素值的第二種方法嗎？我沒有那個電話，所以我無法測試 – sol

實際上是有效的！我將邊界半徑設置爲300px，並解決了問題，但對我來說，它看起來不是一個完美的圓圈。它的左側和右側看起來有點平坦。我會承擔的！謝謝！ –

我認爲這是什麼在Android上使用谷歌瀏覽器中的錯誤。

將此添加到元素應該工作。請測試並回復，因爲我沒有該電話。

.image-boundary { perspective: 1px; /* any non-zero value will work */ }

或替代添加同類型機組的跨境所以em's使用Instem公司只是%

發現這裏 - > CSS Border radius not trimming image on Webkit

來源

2016-12-09 17:42:02 m33bo

我試圖透視技巧以及從該鏈接opactiy解決方法，但都沒有解決它。 –

我有同樣的問題：邊界上如OP所示，在現代Android Chrome瀏覽器中使用空白部分呈現50％邊框半徑的圖像。

我解決了它通過使圖像容器使用border-radius加上所需邊框的背景顏色和填充。

<div id="logo"> 
    <img src="..."> 
</div> 

#logo { 
    border-radius: 50%; 
    padding: 3px; 
    background: #666; 
} 
#logo img { 
    border-radius: 50%; 
}

來源

2017-04-14 17:38:47 Jeremy

Android上的圓邊的奇怪的渲染/鉻

回答

相關問題