Kevin Powell - Community•3y ago

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~•3y ago

Are you using any window resize eventListener on the hero section? A codepen would be great

MarkBoots•3y 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

SaaikaHatakOP•3y 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

SaaikaHatakOP•3y ago

Okay. Most browsers work now. Problem was with not supporting scale CSS. But Facebook browser doesnt support even transform

Gaming

Programming

100vh on facebook browser