100vw overflow bug (macOS)

#dev
afbeelding van 100vw overflow bug (macOS)

100vw staat voor de volledige viewport breedte. Dit is superhandig omdat het alleen rekening houdt met de browser en niet met de elementen waar het element zich in bevindt. Ik gebruik 100vw bijvoorbeeld voor de gekleurde achtergrond vlakken.

Wanneer men in macOS er voor kiest om de schuifbalken (ook wel scrollbars genoemd 😆) altijd te tonen (zie bovenstaande screenshot) verschijnt er een horizontale scrollbar bij het gebruik van 100vw. Aaaaaah!!!!

Er zijn eigenlijk twee oplossingen die ik (tot nu toe) heb kunnen vinden. De eerste is om in een bovenliggende element overflow: hidden te gebruiken. Dit is echter niet altijd mogelijk. Bijvoorbeeld als je zoals op mijn site gebruik maakt van sticky elementen.

Een andere oplossingen is met javascript. Dit soort fixen met javascript doe ik eigenlijk alleen als er echt geen andere mogelijkheid is. Tot op heden is die er volgens mij nog niet.

Zo bereken ik de breedte van de scrollbars:

const scrollbarWidth = window.innerWidth - document.body.clientWidth;
document.body.style.setProperty("--scrollbarWidth", `${scrollbarWidth}px`);

Nu kan ik --scrollbarWidth als variable gebruiken in CSS. Ik maak gebruik van TailwindCSS2 en overschrijf de class `.w-screen' op de volgende manier:

@layer utilities {
  @variants responsive {
    .w-screen {
      width: calc(100vw - var(--scrollbarWidth));
    }
  }
}

Als het goed is, is de horizontale scrollbalk nu verdwenen bij het gebruik van 100vw 🎉