RESOLVED: White flash occurs when set to different viewports

[javascriptcoding5678]

When I click on the blue play image there’s a white flash that occurs when the page is set to different viewports.

Where there’s that white flash, there should be purple in the fade in effect.

To reproduce click the blue play image.

To reproduce issue:

Test on these viewports:

iPhone XS Max/XR/11 (414 x 896)
iPhone 5 (320 x 568)
iPhone 6/7/8 (375 x 667)
iPhone 6+/7+/8+ (414 x 736)
iPhone X/XS/11 Pro (375 x 812)

Set it to one of those. Any of the iPhone ones.

When testing code, press Run not Update.
https://jsitor.com/KI915wsyEf

White Flash that is seen

Does anyone know what is causing the white flash, and how that would be fixed?

Exactly how the fade in should look

.bodyfadeb {
  opacity: 0;
  background: #353198;
  animation: fadeBody 5s ease forwards;
}

.bodyfadeb body {
  background-image:
}

@keyframes fadeBody {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

 document.querySelector("html").classList.add("bodyfadeb");

[tlc35us]

A new blank page is usually white unless you change it in the browser settings. Similar to Flash Of Unstyled Content (FOUC). When I click, it opens in a new blank tab which is white then the content loads. If I open a new tab then paste in the url there’s no flash.

[javascriptcoding5678]

Fixed
https://jsitor.com/pBf8TN5h5Q

   /* comment this out
     .bodyfadeb {
      opacity: 0;
      background: #353198;
      animation: fadeBody 5s ease forwards;
    }
    */
    
    /* use this instead*/
     .bodyfadeb {
      background: #353198;
    }
     .bodyfadeb body {
      animation: fadeBody 5s ease forwards;
    }

White Flash Is Now Removed