# Mobile Chrome vh units fix

DevFeed: [Mobile Chrome vh units fix](<https://devfeed.tech/articles/mobile-chrome-vh-units-fix-37313.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/mobile-chrome-vh-units-fix/>)

Author: Stanko

Published: 2017-01-21T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Chrome](<https://devfeed.tech/topics/chrome.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [bug](<https://devfeed.tech/topics/bug.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [bug](<https://devfeed.tech/tags/bug.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [code](<https://devfeed.tech/tags/code.md>), [demo](<https://devfeed.tech/tags/demo.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [mobile](<https://devfeed.tech/tags/mobile.md>)

## AI overview

This article explains a mobile Chrome vh-unit problem in which changes to the browser window height during scrolling or keyboard use can resize elements and cause page jumps. It presents a plain JavaScript library that fixes element heights in pixels and recalculates them when orientation changes, with usage details and links to a demo, documentation, and GitHub code.

## Source excerpt

Update March 2019 # Check this fix too. It works really well in most cases. If you ever used vh units and tested your work on mobile Chrome (iOS and Android), you probably were annoyed by page jumping when you scroll. As you probably know vh units are based on the window height. When you scroll, Chrome's address bar disappears and chrome actually changes window height. Also triggers window resize event. So when it does happen it changes the value of vh unit, making your elements resize, and page jump. On Android, keyboard toggle will do the same. Well I made a plain JavaScript library to solve this problem. Demo and documentation are available here. How does it work? # On load, it will get the element and set them fixed height in pixels, using this formula: window height / 100 * given vh value Library listens for the window resize event, and only if both dimensions are changed (which on mobile means orientation has changed) it will recalculate and apply fixed height based on new window height. Please note that Android Chrome has a bug - when keyboard pops up, it triggers orientation change Library will only do this if it detects Chrome on Android or iOS. Usage # It accepts one parameter, which is an array of objects. Every object should have CSS selector and height in vh units. All elements that match given selector will be fixed. var options = [ { selector: '.Bears', // Mandatory, CSS selector vh: 150, // Mandatory, height in vh units }, { selector: '.Foxes', vh: 50 }, { selector: '.Horses', vh: 100 } ]; var vhFix = new VHChromeFix(options); React Component is WIP # I have a React component already done in a another project, but I need to extract it, and pack it up as a separate npm package for easier usage. Grab the code on GitHub.