Discussion on: How often have you re-designed your portfolio?

View post

Replies for: I made you few screenshots for comparison (you can ignore the 4k screen size), check out the bottom of the page, the overflow scrollbar appears. I...

Found the culprit! It was the sneaky `.star-wrapper{}`...

I first display the layout blueprint to look for which element misbehave, if I cannot see the complete square shape outline of an element, it must be offscreen (overflow)...

⚠ All screen sizes are green light now. You can sleep well.

/* debugger */
* {
  background: rgba(255, 0, 0, 0.1);
  box-shadow: 0 0 0 1px red;
  outline: 1px solid red;
}

The cure

I replacing the CSS property position: absolute with position: fixed, this also fixed the <start-wrapper> element display at the full height of the viewport and when the page is scrolling down, the stars stays at the background, instead of, it disappears after scrolling down.

.star-wrapper {
  width: 100vw;
  height: 100vh; /* improved to fit full height, previously was 75vh */
  position: fixed;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
}