100vh on facebook browser

I am trying to do 100vh hero and it works fine on chrome, but because of bottom navigation it resizes background image every time bottom navigation pops out/in
4 Replies
~MARSMAN~
~MARSMAN~2y ago
Are you using any window resize eventListener on the hero section? A codepen would be great
MarkBoots
MarkBoots2y ago
There is a solution for this: "dynamic viewport units". It has just launched a couple of weeks ago in a couple of browsers (not all yet, and users have to update their browers). I don't know what facebook uses, but try and use 100dvh or 100dvmax To make sure there is a fallback first set the height in vh
body {
height: 100vh;
height: 100dvh;
}
body {
height: 100vh;
height: 100dvh;
}
more about this: Kevin: https://www.youtube.com/watch?v=5m6JOJLy5B0 Browser support: https://caniuse.com/viewport-unit-variants
SaaikaHatak
SaaikaHatak2y ago
It is just a simple container with background image that is centered and fixed. It works fine on chrome. But using Facebook browser It keeps resizing It. I can make codepen for you. Or Give you netlify/github link. Here. Video for you
SaaikaHatak
SaaikaHatak2y ago
Okay. Most browsers work now. Problem was with not supporting scale CSS. But Facebook browser doesnt support even transform
Want results from more Discord servers?
Add your server