SVG stroke gradient causes horizontal lines to display on iOS Safari

Question

Adding a radial gradient to my SVG path seems to cause weird horizontal (anti-aliasing?) lines on some iOS devices or when you zoom in/out on an iOS device. I wasn't able to replicate it anywhere else.

Here's the (isolated) code:

<svg class="componentClass__chart-svg" width="335" height="318" viewBox="0 0 335 320" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="axesGradient" cx="50%" cy="0%" fx="50%" fy="0%" r="50%">
      <stop stop-color="#FFFFFF" offset="10%"></stop>
      <stop stop-color="#FFFFFF" offset="100%" stop-opacity="0.2"></stop>
    </radialGradient>
  </defs>
  <path class="componentClass__axes" stroke-width="2" stroke="url(#axesGradient)" fill="none" d="M151 12 Q167 0 183 12 L319 108 Q335 120 329 139 L276 299 Q270 318 250 318 L85 318 Q65 318 59 299 L6 139 Q0 120 16 108 Z
                    M151 37 Q167 25 183 37 L293 116 Q309 128 303 147 L260 275 Q254 294 234 294 L101 294 Q81 294 75 275 L32 147 Q26 128 42 116 Z
                    M151 62 Q167 50 183 62 L267 124 Q283 136 277 155 L244 251 Q238 270 218 270 L117 270 Q97 270 91 251 L58 155 Q52 136 68 124 Z
                    M151 87 Q167 75 183 87 L241 132 Q257 144 251 163 L228 227 Q222 246 202 246 L133 246 Q113 246 107 227 L84 163 Q78 144 94 132 Z
                    M152 113 Q167 100 183 113 L215 139 Q231 152 224 171 L213 203 Q206 222 186 222 L149 222 Q129 222 122 203 L111 171 Q104 152 119 139 Z
                    " />
</svg>

And the issue: SVG showing horizontal line

Note this doesn't happen on every iPhone or iPad, but you're usually able to replicate it when you try zooming in and out.

I was able to nail down the issue to this particular use case: as soon as you add the gradient to the stroke, it starts happening. If you change stroke="url(#axesGradient) to just stroke="#FFF", it doesn't seem to happen.

Is there any way I can optimize the SVG to prevent rendering issues?

Here's a Codepen with the exact code above.

Answer 1

Had the same problem, but in my case these lines appeared in any browser on IOS 16, updating to IOS 16.3 fixed it

Answer 2

I was having this issue in the latest iOS when applying a glow effect filter on an svg shape. I eventually found that applying overflow:visible to the svg element solves this. I have no idea why.