Windows : correction de l'unité vw

[alexisben]

Type

• Nouvelle fonctionnalité
• Bug
• Ajustement
• Rangement

Description

Sur Windows, l'unité CSS vw inclue la largeur de la barre de scroll horizontale. Cela créé un écart de dimension entre l'espace réelle disponible de la page et la valeur relative calculée par vw.

Par exemple, sur un écran de 1920px de large : 100vw est égale à 1920px. Mais la place réelle disponible dans la page est 1905px. Cette valeur ne peut pas être récupérer directement via CSS. On ajoute donc le calcul en javascript de la place réelle disponible et on ajoute une fonction sass pour la récupérer :

@function rvw($percent)
    @return calc(#{$percent} * var(--rvw))

--grid-width: Min(var(--grid-max-width), #{rvw(100)})

Niveau d'incidence

• Incidence faible 😌
• Incidence moyenne 😲
• Incidence forte 😱

Screenshots

Avant :

Après :