Why does Chrome fullscreen make the background black?

Question

I built a web page with full screen functionality. I used all of the right CSS properties to ensure that my gradient background fully covers the screen, and it does. However, when I click the full screen button on the website in Chrome, the page goes to full screen but the background turns to black. I looked everywhere and still can’t find anything wrong. iPadOS seems to work fine. The CSS is below, and the rest of the code is in my GitHub repo.

Any help is much appreciated!

CSS:

@import url('https://fonts.googleapis.com/css2?family=Sen:wght@700&display=swap');

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  padding-bottom: 50vh;
  background: -moz-linear-gradient(top, #19c9ff 0%, #d504f9 100%);
  background: -webkit-linear-gradient(top, #19c9ff 0%,#d504f9 100%);
  background: linear-gradient(to bottom, #19c9ff 0%,#d504f9 100%);
  background-repeat: no-repeat;
  background-size: contain;
  text-align: center;
  font-family: 'Sen', serif;
}

.nav {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  position: fixed;
  width: 100%;
}

.full {
  color: white;
  position: fixed;
  right: 20px;
  top: 12px;
  font-size: 1.34em;
}

.auto {
  color: white;
  position: fixed;
  left: 20px;
  top: 12px;
  font-size: 1.34em;
}

.logo {
  max-width: 200px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
}

p {
  color: white;
}

#pis {
  margin-top: 33vh;
}

h1 {
  color: white;
}

.micah-box i {
  font-size: 2em !important;
  color: rgba(0, 0, 0, 0.25);
  transition: 0.3s;
}

.micah-box {
  position: fixed;
  bottom: 15px;
  left: 15px;
  transition: 0.35s;
}

.micah:hover {
  color: white;
}

.micah-box h2 {
  font-size: 0.8em;
  float: right;
  margin-left: 10px;
  background-color: rgba(0, 0, 0, 0.25);
  padding: 9px;
  border-radius: 3px;
  color: rgba(225, 225, 225, 0.3);
  transition: 0.3s;
}

.micah-box h2:hover {
  background-color: white;
  color: black;
}

Answer 1

Your fullscreen Javascript is slightly wrong.

body.requestFullscreen();

What your saying here is fullscreen the body element, and not the full page.

Instead try ->

document.documentElement.requestFullscreen()