fix SVG gradient rendering for iOS WebViews (#89)

jaames · Oct 21, 2019 · c6796c0 · c6796c0
1 parent 7fe62e2
commit c6796c0
Show file tree

Hide file tree

Showing 12 changed files with 48 additions and 37 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 ### Changelog
 
+#### 4.5.3
+
+##### Fixes
+
+* Further fixes to UI gradient rendering in cases where iro.js is used in a page where a `<base>` tag is also present. 
+
 #### 4.5.2
 
 ##### Fixes

diff --git a/dist/iro.es.js b/dist/iro.es.js
diff --git a/dist/iro.es.js.map b/dist/iro.es.js.map
diff --git a/dist/iro.js b/dist/iro.js
diff --git a/dist/iro.js.map b/dist/iro.js.map
diff --git a/dist/iro.min.js b/dist/iro.min.js
diff --git a/dist/iro.min.js.map b/dist/iro.min.js.map
diff --git a/docs/.vuepress/theme/js/iro.es.js b/docs/.vuepress/theme/js/iro.es.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jaames/iro",
-  "version": "4.5.2",
+  "version": "4.5.3",
   "description": "An HSV color picker widget for JavaScript, with a modern SVG-based user interface",
   "module": "dist/iro.es.js",
   "main": "dist/iro.js",

diff --git a/src/util/svg.js b/src/util/svg.js
@@ -1,3 +1,8 @@
+// Keep track of html <base> elements for resolveUrl
+// getElementsByTagName returns a live HTMLCollection, which stays in sync with the DOM tree
+// So it only needs to be called once
+const bases = document.getElementsByTagName('base');
+
 /**
  * @desc Resolve an SVG URL
  * This is required to work around how Safari handles gradient URLS under certain conditions
@@ -7,9 +12,7 @@
  * https://stackoverflow.com/questions/19742805/angular-and-svg-filters/19753427#19753427
  * https://github.com/jaames/iro.js/issues/18
  * https://github.com/jaames/iro.js/issues/45
- * There's also a secondary issue with using absolute SVG gradient URLs in Ionic, as the
- * Ionic Webview plugin changes location.protocol to "ionic://" which breaks URL resolution
- * https://github.com/jaames/iro.js/issues/45#issuecomment-542949642
+ * https://github.com/jaames/iro.js/pull/89
  * @param {String} url resource url (should be an id selector e.g "#example")
  * @returns {String} resolved url
  */
@@ -19,9 +22,7 @@ export function resolveUrl(url) {
   const ua = window.navigator.userAgent;
   const isSafari = /^((?!chrome|android).)*safari/i.test(ua);
   const isIos = /iPhone|iPod|iPad/i.test(ua);
-  // Sniff protocol string to check if iro.js is running in an Ionic webview
-  const isIonic = /ionic/i.test(location.protocol);
-  return ((isSafari || isIos) && (!isIonic)) ? `${location.protocol}//${location.host}${location.pathname}${location.search}${url}` : url;
+  return ((isSafari || isIos) && (bases.length > 0)) ? `${location.protocol}//${location.host}${location.pathname}${location.search}${url}` : url;
 }
 
 /**

diff --git a/tests/util.svg.test.js b/tests/util.svg.test.js
@@ -10,6 +10,7 @@ describe('resolveUrl', () => {
 
   test('resolveUrl correctly resolves full URL when a Safari userAgent is present', () => {
     Object.defineProperty(window.navigator, 'userAgent', {value: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.2 Safari/605.1.15'});
+    document.head.innerHTML = '<base href="/" />';
     expect(resolveUrl('#test')).toBe('http://localhost/#test');
     window.history.pushState({}, '', '/example');
     expect(resolveUrl('#test')).toBe('http://localhost/example#test');