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上的圆边的奇怪的渲染/铬

回答

相关问题