Code Smoothie

Chrome mobile viewport height bug and workaround

Problem

There’s a funny glitch in Chrome for Android where the vh unit is subject to change. When you scroll down, the title bar disappears, and the vh unit takes up more pixel space. When you scroll up, the vh unit takes up less space. This causes jank and recalculation of layout.

I came across this bug two months ago when I was working on my Webmaster project for Technology Student Association.

Workaround

Simply set the transition delay of the affected property to a really large number. Now, the shift will never occur.

div {
  height: 50vh;
  transition: height 1s ease-in 100000000s;
}

The downside to this that when switching screen orientation, the unit will not be reevaluated. I have not figured out this one, but I’m sure it’s possible with some more CSS and/or JavaScript hacks.