Fix stray line on checkbox in IE11

IE sometimes miscalculates the border width of a rotated element resulting in a thin border as shown in #518. Setting a transparent border fixes this.
alphagov · Jul 14, 2017 · a346da6 · a346da6
1 parent 1dbe624
commit a346da6
Showing 1 changed file with 3 additions and 0 deletions.
diff --git a/src/components/checkbox/_checkbox.scss b/src/components/checkbox/_checkbox.scss
@@ -85,6 +85,9 @@
     transform: rotate(-45deg);
     border: solid;
     border-width: 0 0 5px 5px;
+    // Fix bug in IE11 caused by transform rotate (-45deg).
+    // See: alphagov/govuk_elements/issues/518
+    border-top-color: transparent;
 
     opacity: 0;