I created this Flashcards React web app for my son, and we kept facing this annoying CSS issue where I kept seeing my background color change from black to white when I scrolled down. This issue only happens on a phone.
Phone
As you can can see that it’s working fine on Desktop.
desktop
This is my entire CSS for that page
.thumbnails-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.thumbnail {
display: flex;
flex-direction: column;
align-items: center;
width: 300px;
height: 300px;
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
transition: background-color 0.3s;
background-color: rgba(0, 0, 0, 0.2);
}
3
Answers
Set
height: 100%;
instead ofheight: 100vh;
in your.categories-page
class to solve this issue.By checking your app you should remove the
height:100vh
of your.categories-page
classIn the rule for
.categories-page
(= the element that has the dark background), changeheight: 100vh;
tomin-height: 100vh;
to allow it to grow when there is more content.