android - Android / Chrome上圆形边框的奇怪渲染

Question

这是我遇到的问题：

这是我正在使用的代码笔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;
}

Answer 1

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

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

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

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

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

Answer 3

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

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

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

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

在这里找到-> CSS 边框半径没有在 Webkit 上修剪图像