les unités CSS "vw" en calc en Chrome ne fonctionnent pas
La vw (et vh,vmin et vmax) les unités CSS sont très utiles, tout comme calc. Les deux fonctionnent bien en Chrome (ce dernier préfixe étant -webkit-calc), mais pour une raison quelconque, j'ai trouvé que calc valeurs des propriétés incluant les v* unités, telles que width: -webkit-calc(95vw - 25em) donner une valeur de propriété invalide. Est-ce que ceci n'est pas encore implémenté, ou la spécification, ou un bug?
2 réponses
C'est un bug, enregistrée en tant que Bug 94158 - calc ne fonctionne pas avec les unités de viewport.
C'est un vieux bug qui a été corrigé depuis longtemps, mais si vous supportez toujours les anciennes versions de chrome, et en particulier si vous rencontrez ce bug dans une ancienne version de Chrome sur une tablette Android que vous supportez (comme c'était mon cas), voici le moyen simple de contourner ce bug:
utilisez une enveloppe qui s'étend sur la VW que vous visez, et puis au lieu d'utiliser les unités de viewport dans le calc(...), utiliser 100%.
html:
<div class="container">
<div class="inner-calc-with-viewport-units-bugged" />
</div>
css:
.container {
width: 100vw; //or height: 100vh, depending on your usecase
}
.inner-calc-with-viewport-units-bugged {
width: calc(100% - XXXXX px); //or height: calc(100% - XXpx);
}