Weird rendering of circle border on Android / Chrome

Question

Here's an issue of what i'm experiencing:

enter image description here

Here is my codepen I'm using http://codepen.io/johnsonjpj/pen/jVpreB

My issue is showing up on my Samsung Galaxy s5 in chrome version 54.0.2840.85, Android 6.01.

Firefox shows the border correctly as well as iPhones show it working as expected.

I'm having a hard time narrowing down what the issue is, but I suspect it has something to do with the width of my .image-boundary class or something to do with the border-color.

Possibly with these lines?

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

works fine on a galaxy s5, but where chrome is update , what is this version you are using ? — G-Cyrillus, Dec 09 '16 at 18:25

score 1 · Answer 1 · answered Apr 14 '17 at 17:38

I had the same problem: a border on an image with a 50% border-radius rendered with blank parts, in modern Android Chrome, as OP showed.

I solved it by making the image container use the border-radius plus the background color and padding of the desired border.

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

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

score 0 · Answer 2 · answered Dec 09 '16 at 17:40

0

Try prefixing border radius like this:

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

If that doesn't work try add the border-radius individually, like this:

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

answered Dec 09 '16 at 17:40

sol

22,311
6
42
59

Had no effect on the bug. – Jacob J Dec 09 '16 at 17:59
Did you try the second method using pixel values? I don't have that phone so I can't test – sol Dec 09 '16 at 18:12
actually that works! I set my border-radius to 300px and it fixed the issue, although to me it looks like it's not a perfect circle. It looks a tiny bit flat on the left and right sides. I'll take it though! Thank you! – Jacob J Dec 09 '16 at 18:19

score 0 · Answer 3 · edited May 23 '17 at 11:54

0

I think it is something to do with a bug in google chrome on android.

Adding this to the element should work. Please test and reply as I do not have that phone.

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

Or instead add the same type of unit across the border so instem of em's use just %

Found here-> CSS Border radius not trimming image on Webkit

edited May 23 '17 at 11:54

Community

1
1

answered Dec 09 '16 at 17:42

m33bo

1,334
1
17
34

I tried the perspective trick as well as the opactiy workaround from that link but neither fixed it. – Jacob J Dec 09 '16 at 18:00

Weird rendering of circle border on Android / Chrome

3 Answers3