Add workaround for Chrome/Edge 84 SVG bug

Chrome and Edge 84 have a bug relating to icon sprite svgs
https://bugs.chromium.org/p/chromium/issues/detail?id=1107442

If the SVG is loaded, under certain circumstances the icons are not
shown. As a workaround we use the well-tested svg4everybody and
forcefully include the icon fragments into the DOM and thus
circumventing the bug.

app/assets/javascripts/lib/chrome_84_icon_fix.js

+import svg4everybody from 'svg4everybody';
+
+/*
+  Chrome and Edge 84 have a bug relating to icon sprite svgs
+  https://bugs.chromium.org/p/chromium/issues/detail?id=1107442
+
+  If the SVG is loaded, under certain circumstances the icons are not
+  shown. As a workaround we use the well-tested svg4everybody and forcefully
+  include the icon fragments into the DOM and thus circumventing the bug
+ */
+document.addEventListener('DOMContentLoaded', () => {
+  svg4everybody({ polyfill: true });
+});

app/views/layouts/_head.html.haml

@@ -70,6 +70,7 @@
     = yield :page_specific_javascripts
 
   = webpack_controller_bundle_tags
+  = webpack_bundle_tag "chrome_84_icon_fix" if browser.chrome?([">=84", "<85"]) || browser.edge?([">=84", "<85"])
 
   = yield :project_javascripts
 

changelogs/unreleased/leipert-cache-busting-icons.yml

+---
+title: Add workaround for Chrome 84 SVG bug
+merge_request: 38304
+author:
+type: fixed

config/webpack.config.js

@@ -79,6 +79,7 @@ function generateEntries() {
   const manualEntries = {
     default: defaultEntries,
     sentry: './sentry/index.js',
+    chrome_84_icon_fix: './lib/chrome_84_icon_fix.js',
   };
 
   return Object.assign(manualEntries, autoEntries);

package.json

@@ -129,6 +129,7 @@
     "stickyfilljs": "^2.1.0",
     "string-hash": "1.1.3",
     "style-loader": "^1.1.3",
+    "svg4everybody": "^2.1.9",
     "swagger-ui-dist": "^3.26.2",
     "three": "^0.84.0",
     "three-orbit-controls": "^82.1.0",

vendor/licenses.csv

@@ -1044,6 +1044,7 @@ strip-json-comments,2.0.1,MIT
 style-loader,0.23.0,MIT
 supports-color,2.0.0,MIT
 supports-color,5.5.0,MIT
+svg4everybody,2.1.9,CC0-1.0
 symbol-observable,1.2.0,MIT
 sys-filesystem,1.1.6,Artistic 2.0
 tapable,1.1.0,MIT

yarn.lock

@@ -11208,6 +11208,11 @@ svg-tags@^1.0.0:
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
 
+svg4everybody@^2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/svg4everybody/-/svg4everybody-2.1.9.tgz#5bd9f6defc133859a044646d4743fabc28db7e2d"
+  integrity sha1-W9n23vwTOFmgRGRtR0P6vCjbfi0=
+
 swagger-ui-dist@^3.26.2:
   version "3.26.2"
   resolved "https://registry.yarnpkg.com/swagger-ui-dist/-/swagger-ui-dist-3.26.2.tgz#22c700906c8911b1c9956da6c3fca371dba6219f"