Iro.js gradients do not render properly in cordova-plugin-ionic-webview on iOS

[jaames]

This is a continuation from the conversation near the end of #45

Context

Safari for iOS/macOS and iOS webviews handle SVG IRIs strangely, and sometimes require references for things like gradients and filters to be absolute urls (for example, instead of fill="url(#gradient)", you need to use fill="url(https://example.com/some/page#gradient)").

This is detailed more in #18 and there's several stackoverflow threads which explain this better than I can:
https://stackoverflow.com/questions/19742805/angular-and-svg-filters/19753427
https://stackoverflow.com/questions/29736284/url-to-linear-gradient-doesnt-work

To work around this, iro.js uses a helper function to resolve SVG gradient references to absolute URLs if necessary. That function looks like this:

resolveUrl(url) {
  const location = window.location;
  const ua = window.navigator.userAgent;
  const isSafari = /^((?!chrome|android).)*safari/i.test(ua);
  const isIos = /iPhone|iPod|iPad/i.test(ua);
  return ((sSafari || isIos) ? `${location.protocol}//${location.host}${location.pathname}${location.search}${url}` : url;
}

TL;DR: it sniffs the user agent string to detect if iro.js is running in Safari or an iOS Webview, if that's the case, then it prepends the provided url with the full location path for the current page to make it an absolute URL. This seems to work fine for most purposes.

The Problem

When used iro.js is used in an Ionic app with Cordova and cordova-plugin-ionic-webview, this solution doesn't seem to work on iOS... and I'm not entirely sure why.

I think it may be related to cordova-plugin-ionic-webview setting location.protocol to ionic:https://, presumably to work around CORS issues.

My initial solution was to simply add a check for location.protocol being set to ionic:https:// and use relative URLs if that was the case, which surprisingly works in ionic-angular version 3.9.5, but not version 4.11.1.

My second solution was to use protocol-relative urls (e.g. //example.com/some/page#gradient) instead of absolute URLS. Weirdly, this seems to work in ionic-angular version 4.11.1 ... but not 3.9.5?

References

@13546777510 has helpfully created some test repositories to reproduce the error:
https://github.com/13546777510/iro-ionic3
https://github.com/13546777510/iro-ionic4

They opened an issue on the main ionic repository, which helped to pinpoint cordova-plugin-ionic-webview as a potential culprit: ionic-team/ionic-framework#19710

They also opened an issue on the cordova-plugin-ionic-webview repository: ionic-team/cordova-plugin-ionic-webview#457

---

I would really appreciate any help with this, since I'm really not very familiar with Ionic, Cordova or Angular myself.

Thanks!

[jaames]

Thanks to #89 this should now be fixed, please update to the latest version of iro.js :)