Android / Chrome上圆形边框的奇怪渲染答案

【问题标题】：Weird rendering of circle border on Android / ChromeAndroid / Chrome上圆形边框的奇怪渲染
【发布时间】：2016-12-09 17:30:18
【问题描述】：

这是我遇到的问题：

这是我正在使用的代码笔 http://codepen.io/johnsonjpj/pen/jVpreB

我的问题出现在我的三星 Galaxy s5 上，Chrome 版本为 54.0.2840.85，Android 6.01。

Firefox 正确显示边框，iPhone 显示它按预期工作。

我很难缩小问题的范围，但我怀疑这与我的 .image-boundary 类的宽度或与 border-color 有关。

可能有这几行？

.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;
}

【问题讨论】：

在galaxy s5上运行良好，但是chrome是更新的，你用的是什么版本？
chrome 版本 54.0.2840.85，Android 6.01

标签： android html css google-chrome samsung-galaxy

【解决方案1】：

我遇到了同样的问题：如 OP 所示，在现代 Android Chrome 中，具有 50% 边框半径的图像上的边框用空白部分渲染。

我通过使图像容器使用边框半径加上所需边框的背景颜色和填充来解决它。

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

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

【讨论】：

【解决方案2】：

尝试像这样为边框半径添加前缀：

-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%;

【讨论】：

对错误没有影响。
您是否尝试过使用像素值的第二种方法？我没有那部手机，所以我无法测试
确实可行！我将边框半径设置为 300px，它解决了这个问题，尽管对我来说它看起来不是一个完美的圆。它的左右两侧看起来有点平。不过我会接受的！谢谢！

【解决方案3】：

我认为这与 android 上的 google chrome 中的错误有关。

将它添加到元素应该可以工作。请测试并回复，因为我没有那个手机。

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

或者改为在边界上添加相同类型的单元，因此 em's 只使用 %

在这里找到-> CSS Border radius not trimming image on Webkit

【讨论】：

我尝试了透视技巧以及来自该链接的 opactiy 解决方法，但都没有修复它。