fix(hideVisually): remove clip-path from hideVisually

The use of `clip-path` harms performance during scroll events in Chrome. In the meantime, browsers can fall back to using `clip` until this bug in Chrome is fixed.
styled-components · Sep 7, 2019 · b8ef2ba · b8ef2ba
1 parent b0762e9
commit b8ef2ba
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git a/docs/assets/polished.js b/docs/assets/polished.js
@@ -1399,7 +1399,6 @@
    * 'div': {
    *   'border': '0',
    *   'clip': 'rect(0 0 0 0)',
-   *   'clipPath': 'inset(50%)',
    *   'height': '1px',
    *   'margin': '-1px',
    *   'overflow': 'hidden',
@@ -1410,10 +1409,15 @@
    * }
    */
   function hideVisually() {
+    // Note: The use of `clip-path` causes performance degredation on scroll events in Chrome.
+    // For more information, see:
+    // * h5bp/html5-boilerplate#2021
+    // * zurb/foundation-sites#10914
+    // * twbs/bootstrap#24906
     return {
       border: '0',
       clip: 'rect(0 0 0 0)',
-      clipPath: 'inset(50%)',
+      // clipPath: 'inset(50%)',
       height: '1px',
       margin: '-1px',
       overflow: 'hidden',

diff --git a/docs/docs/index.html b/docs/docs/index.html
@@ -2002,7 +2002,6 @@ <h3 class='fl m0' id='hidevisually'>
 <span class="hljs-string">'div'</span>: {
   <span class="hljs-string">'border'</span>: <span class="hljs-string">'0'</span>,
   <span class="hljs-string">'clip'</span>: <span class="hljs-string">'rect(0 0 0 0)'</span>,
-  <span class="hljs-string">'clipPath'</span>: <span class="hljs-string">'inset(50%)'</span>,
   <span class="hljs-string">'height'</span>: <span class="hljs-string">'1px'</span>,
   <span class="hljs-string">'margin'</span>: <span class="hljs-string">'-1px'</span>,
   <span class="hljs-string">'overflow'</span>: <span class="hljs-string">'hidden'</span>,

diff --git a/src/mixins/hideVisually.js b/src/mixins/hideVisually.js
@@ -21,7 +21,6 @@ import type { Styles } from '../types/style'
  * 'div': {
  *   'border': '0',
  *   'clip': 'rect(0 0 0 0)',
- *   'clipPath': 'inset(50%)',
  *   'height': '1px',
  *   'margin': '-1px',
  *   'overflow': 'hidden',
@@ -32,10 +31,15 @@ import type { Styles } from '../types/style'
  * }
  */
 export default function hideVisually(): Styles {
+  // Note: The use of `clip-path` causes performance degredation on scroll events in Chrome.
+  // For more information, see:
+  // * h5bp/html5-boilerplate#2021
+  // * zurb/foundation-sites#10914
+  // * twbs/bootstrap#24906
   return {
     border: '0',
     clip: 'rect(0 0 0 0)',
-    clipPath: 'inset(50%)',
+    // clipPath: 'inset(50%)',
     height: '1px',
     margin: '-1px',
     overflow: 'hidden',

diff --git a/src/mixins/test/__snapshots__/hideVisually.test.js.snap b/src/mixins/test/__snapshots__/hideVisually.test.js.snap
@@ -4,7 +4,6 @@ exports[`hideVisually should return the CSS in JS 1`] = `
 Object {
   "border": "0",
   "clip": "rect(0 0 0 0)",
-  "clipPath": "inset(50%)",
   "height": "1px",
   "margin": "-1px",
   "overflow": "hidden",