android - Android / Chrome での円枠の奇妙なレンダリング

Question

これが私が経験していることの問題です：

これが私が使用しているコードペンですhttp://codepen.io/johnsonjpj/pen/jVpreB

私の問題は、Chrome バージョン 54.0.2840.85、Android 6.01 の Samsung Galaxy s5 に表示されます。

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