Solution 1 :

It’s a bit of a long shot, but try changing the last subpath in your SVG (the eye shape) to this:

M 55.37, 39.3 c 0,0, 17, 36.58, 54.06, 36.58 c 37.2, 0, 55.89 -36.58, 55.89 -36.58
C 165.32 39.3, 153.38, 6.21, 109.43, 6.4 C 65.66, 6.21, 55.37, 39.3, 55.37, 39.3 Z

I’m taking a stab that the S/s commands in the path are not being handled correctly. That’s the only thing that is slightly odd about the path.

It doesn’t really explain why it would be happening on multiple browsers though.

Problem :

I have this SVG made in AI:

<svg  viewBox="0 0 218.86 147.2">
   <path d="M38.68,120.52,60.06,90M34.46,59.08,3.58,80M158.8,90l21.38,30.52M215.27,80,184.4,59.08m-75,88.12V102.45M124.7,40.88a15.64,15.64,0,1,1-15.63-15.63A15.63,15.63,0,0,1,124.7,40.88ZM55.37,39.3s17,36.58,54.06,36.58c37.2,0,55.89-36.58,55.89-36.58S153.38,6.21,109.43,6.4C65.66,6.21,55.37,39.3,55.37,39.3Z" fill="none" stroke="current" stroke-miterlimit="10" stroke-width="12.8"/>

On desktop, it shows up correctly:

enter image description here

But on mobile, the edges are showing up incorrectly:

enter image description here

Is there a way to resolve this?


Comment posted by Paul LeBeau

Which mobile devices? Which browsers?

Comment posted by Donald Zhu

@PaulLeBeau iPhone 11, I have tried Safari, Chrome, Firefox, Opera, and Edge on my phone and they all displayed incorrectly.

Comment posted by Donald Zhu

I have fixed the circle by using

Comment posted by Paul LeBeau

There is no path that matches that in your original SVG. Have you altered the SVG?

Comment posted by Robert Longson

On iOS browsers are just shells on webkit. I.e. the rendering engine for Firefox on iOS is not gecko it’s webkit, same with Chrome because Apple don’t allow any other rendering engines than webkit.

Comment posted by Paul LeBeau

Ah yes, of course. I forgot about that. Thanks Robert.

Comment posted by Paul LeBeau

I’m glad. It would help others if you reported this bug to Apple.