I created a webpage with full-screen functionality and made sure to use the correct CSS properties to ensure that my gradient background covers the entire screen perfectly. However, I encountered an issue when clicking the full-screen button in Chrome - the background turns black instead of remaining as the gradient. I've searched everywhere but can't seem to find what's causing this issue. Interestingly, it seems to work fine on iPadOS. You can find the CSS code below and access the rest of the code on my GitHub repo.
Any assistance on this matter would be highly 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;
}