fix: improve CLS rating in lighthouse (#1020)

* fix: improve CLS rating in lighthouse

* visibility needs to be added to the final reveal keyframe

* adding changelog

Co-authored-by: Kyle Buchanan <[email protected]>

Author: mwcz

CHANGELOG-prerelease.md

@@ -1,6 +1,7 @@
 ## Prerelease 55 ( TBD )
 
 - [](https://github.com/patternfly/patternfly-elements/commit/)
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: improve CLS rating in lighthouse (#1020)
 
 ## Prerelease 54 ( 2020-07-31 )
 

elements/pfelement/src/pfelement.scss

@@ -12,15 +12,21 @@ body {
 
 body[unresolved] {
   opacity: 0;
+  visibility: hidden;
   animation: reveal var(--pfe-reveal-duration) var(--pfe-reveal-delay) 1
     forwards;
 }
 
 @keyframes reveal {
-  from {
+  0% {
+    visibility: hidden;
     opacity: 0;
   }
-  to {
+  1% {
+    visibility: visible;
+  }
+  100% {
     opacity: 1;
+    visibility: visible;
   }
 }

elements/pfelement/test/fouc-test.html

@@ -43,7 +43,8 @@ <h2 slot="pfe-card--header">Card 1</h2>This is pfe-card.
         test('body[unresolved] should cause the page to be hidden', () => {
           document.body.setAttribute('unresolved', '');
           const styles = document.body.computedStyleMap();
-          assert.equal(styles.get('opacity').value, 0, 'body[unresolved] causes the page to be hidden');
+          assert.equal(styles.get('opacity').value, 0, 'body[unresolved] causes the page to have 0 opacity');
+          assert.equal(styles.get('visibility').value, "hidden", 'body[unresolved] causes the page to be hidden');
         });
 
         test('removing body[unresolved] should cause the page to be revealed', done => {
@@ -61,14 +62,16 @@ <h2 slot="pfe-card--header">Card 1</h2>This is pfe-card.
             if (styles.get('opacity').value === 1) {
               clearTimeout(tid);
               clearInterval(iid);
-              assert.equal(styles.get('opacity').value, 1, 'removing body[unresolved] causes the page to be revealed');
+              assert.equal(styles.get('opacity').value, 1, 'removing body[unresolved] causes the page to have 1 opacity');
+              assert.equal(styles.get('visibility').value, "visible", 'body[unresolved] causes the page to be visible');
               done();
             }
           }, 50);
 
           tid = setTimeout(() => {
             clearInterval(id);
             assert.equal(styles.get('opacity').value, 1, 'removing body[unresolved] causes the page to be revealed');
+            assert.equal(styles.get('visibility').value, "visible", 'body[unresolved] causes the page to be visible');
             done();
           }, 1500);
         });