Issue 5990 - Fix broken SVG icons in Chrome

skin/desktop-options.css

Index: skin/desktop-options.css
===================================================================
--- a/skin/desktop-options.css
+++ b/skin/desktop-options.css
@@ -181,13 +181,14 @@
 
 button[role="checkbox"]:not(.toggle)
 {
-  background-image: url(icons/checkbox.svg#off);
+  /* Using ?query as a workaround to chromium bug #643716 */
+  background-image: url(icons/checkbox.svg?1#off);

[Thomas Greiner, 2017/11/20 17:39:06]

Rather than using arbitrary numbers which could mistakenly be duplicated and
thereby break it again, why not simply use the same ID?

i.e. icons/checkbox.svg?off#off

[saroyanm, 2017/11/20 18:42:25]

I agree, done.

   display: inline-block;
 }
 
 button[role="checkbox"][aria-checked="true"]:not(.toggle)
 {
-  background-image: url(icons/checkbox.svg#on);
+  background-image: url(icons/checkbox.svg?2#on);
 }
 
 button[role="checkbox"][disabled],
@@ -199,17 +200,17 @@
 
 button[role="checkbox"].toggle
 {
-  background: url(icons/toggle.svg#on);
+  background-image: url(icons/toggle.svg?1#on);
 }
 
 button[role="checkbox"][aria-checked="false"].toggle
 {
-  background: url(icons/toggle.svg#off);
+  background-image: url(icons/toggle.svg?2#off);
 }
 
 button[role="checkbox"][aria-checked="true"].toggle
 {
-  background: url(icons/toggle.svg#on);
+  background-image: url(icons/toggle.svg?3#on);
 }
 
 button[role="checkbox"].toggle
@@ -227,22 +228,22 @@
 
 button.delete::before
 {
-  background-image: url(icons/trash.svg#default);
+  background-image: url(icons/trash.svg?1#default);
 }
 
 button.delete:hover::before
 {
-  background-image: url(icons/trash.svg#hover);
+  background-image: url(icons/trash.svg?2#hover);
 }
 
 button.gear::before
 {
-  background-image: url(icons/gear.svg#default);
+  background-image: url(icons/gear.svg?1#default);
 }
 
 button.gear:hover::before
 {
-  background-image: url(icons/gear.svg#hover);
+  background-image: url(icons/gear.svg?2#hover);
 }
 
 button.gear,
@@ -404,7 +405,7 @@
 [data-validation] .floating-input input:valid ~ .attention::before
 {
   top: 0.5rem;
-  background-image: url(icons/checkmark.svg#approved);
+  background-image: url(icons/checkmark.svg?1#approved);
 }
 
 [data-validation] .floating-input input ~ .error-msg
@@ -900,7 +901,7 @@
   content: "";
   width: 1.3rem;
   height: 1.3rem;
-  background-image: url(icons/checkmark.svg#default);
+  background-image: url(icons/checkmark.svg?2#default);
   margin: 0rem;
 }
 
@@ -1228,7 +1229,7 @@
 
 .context-menu .delete::before
 {
-  background-image: url(icons/trash.svg#default);
+  background-image: url(icons/trash.svg?3#default);
 }
 
 /*
@@ -1352,12 +1353,12 @@
   height: 1rem;
   width: 1rem;
   border: 0rem;
-  background-image: url(icons/delete.svg#primary);
+  background-image: url(icons/delete.svg?1#primary);
 }
 
 #dialog-close:hover::before
 {
-  background-image: url(icons/delete.svg#primary-hover);
+  background-image: url(icons/delete.svg?2#primary-hover);
 }
 
 #dialog #dialog-body
@@ -1474,10 +1475,10 @@
 
 #hide-notification::after
 {
-  background-image: url(icons/delete.svg#secondary);
+  background-image: url(icons/delete.svg?3#secondary);
 }
 
 #hide-notification:hover::after
 {
-  background-image: url(icons/delete.svg#secondary-hover);
+  background-image: url(icons/delete.svg?4#secondary-hover);
 }