Ionic-framework: bug: complex SVG on ion-icon is not displayed on iOS

Created on 5 Jul 2019 · 7Comments · Source: ionic-team/ionic-framework

Bug Report

Ionic version:
[x] 4.6

Current behavior:
When you use a custom SVG for ion-icon and this SVG is a little more complex than usual, it does not appear in Safari / iOS. The same SVG works fine on both Safari and Chrome if you use it as background-image CSS property of an element.

Expected behavior:
It should appear correctly on both Safari and Chrome.

Steps to reproduce:

Clone project below
Run npm install
Run ionic serve
Open both Safari and Chrome

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.1 (/Users/anagstef/.nvm/versions/node/v10.15.3/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Utility:

   cordova-res : not installed
   native-run  : 0.2.7

System:

   NodeJS : v10.15.3 (/Users/anagstef/.nvm/versions/node/v10.15.3/bin/node)
   npm    : 6.10.0
   OS     : macOS Mojave

triage

Source

anagstef

👍1

All 7 comments

https://github.com/ionic-team/ionic/issues/18637

pauloedsr on 5 Jul 2019

👍1

@pauloedsr Actually this is a different issue. The SVG is found and Chrome displays it correctly, but Safari cannot draw it.

anagstef on 5 Jul 2019

@anagstef can you try the following:

modify "fill" property inside your rocket.svg to feature full absolute url:

instead of fill='url(#linearGradient-1)'
do fill='url(http://localhost:8100#linearGradient-1)'

This is just for triage. But I am pretty positive this is the issue with Safari not being able to find filters or gradients by relative urls.

cmer4 on 16 Jul 2019

👍1

@cmer4 You are right!!

I used this: fill='url(http://localhost:8100/home#linearGradient-1)'
(because my main page path is /home)

The Safari works fine too now! But, it cannot be used as background-image of an element, which seems to be expected.

anagstef on 16 Jul 2019

Cool:)

So the thing that caused this effect is still baseUrl related, but not really Ionic specific. See here more details: https://stackoverflow.com/questions/18259032/using-base-tag-on-a-page-that-contains-svg-marker-elements-fails-to-render-marke

I think ion-icon documentation around "custom" svg can be improved though, but other than that there is nothing Ionic can do to improve it

cmer4 on 16 Jul 2019

👍1

I'm also facing this issue and it sounds like the proposed workaround of using absolute paths (localhost:8100) is not ideal. Can I use localhost on an iOS "native" app?

gugahoi on 8 Jan 2020

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. This appears to be a bug in WebKit, the engine that powers Safari. The good news is that as of iOS 13.6 I am no longer able to reproduce the issue, meaning the underlying issue has been resolved.

Thanks!