You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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)").
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?
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
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 usefill="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:
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
toionic:https://
, presumably to work around CORS issues.My initial solution was to simply add a check for
location.protocol
being set toionic:https://
and use relative URLs if that was the case, which surprisingly works inionic-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!
The text was updated successfully, but these errors were encountered: