CSS3 100vh not constant in mobile browser

Question

I have a very odd issue    in every browser and mobile version I encountered this behavior    all the browsers have a top menu when you load the page  showing the address bar for example  which slide up when you start scrolling the page  100vh sometimes is calculated only on the visible part of a viewport  so when the browser bar slide up 100vh increases  in terms of pixels  all layout re-paint and re-adjust since the dimensions have changed a bad jumpy effect for user experience   How can avoid this problem  When I first heard of viewport-height I was excited and I thought I could use it for fixed height blocks instead of using javascript  but now I think the only way to do that is in fact javascript with some resize event     you can see the problem at  sample site  Can anyone help me with   suggest a CSS solution     simple test code    x000D   x000D     maybe i can track the issue whe it occours       x000D    function    x000D    var resized   -1  x000D      window  resize function    x000D          currenth   val      vhbox   eq 1  height      x000D      if    resized      currenth   css  background  00c    x000D       x000D     resize    x000D     x000D     margin 0  padding 0    x000D   x000D     x000D    this is the box which should keep constant the height    x000D    min-height to allow content to be taller than viewport if too much text x000D     x000D   vhbox  x000D    min-height 100vh  x000D    position relative  x000D    x000D   x000D   vhbox  t  x000D    display table  x000D    position relative  x000D    width 100   x000D    height 100vh  x000D    x000D   x000D   vhbox  c  x000D    height 100   x000D    display table-cell  x000D    vertical-align middle  x000D    text-align center  x000D    x000D   lt div class  vhbox  style  background-color  c00  gt  x000D     lt div class  t  gt  lt div class  c  gt  x000D    this div height should be 100  of viewport and keep this height when scrolling page x000D       lt br gt  x000D       lt  -- this input highlight if resize event is fired -- gt  x000D       lt input type  text  id  currenth  gt  x000D     lt  div gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  vhbox  style  background-color  0c0  gt  x000D     lt div class  t  gt  lt div class  c  gt  x000D    this div height should be 100  of viewport and keep this height when scrolling page x000D     lt  div gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Here s a work around I used for my React app   iPhone 11 Pro  amp  iPhone Pro Max - 120px  iPhone 8 - 80px  max-height  calc 100vh - 120px     It s a compromise but relatively simple fix

User · Answer

For me such trick made a job   height  calc 100vh - calc 100vh - 100

User · Answer

Brave browser on iOS behaves differently  buggy    It changes viewport height dynamically accordingly to showing hiding address bar  It is kind of annoying because it changes page s layout dependent on vw vh units  Chrome and Safari is fine

User · Answer

You can do this by adding following script and style   function appHeight         const doc   document documentElement     doc style setProperty  --vh    window innerHeight  01     px           window addEventListener  resize   appHeight     appHeight     Style  module     height  100vh     Fallback for browsers that do not support Custom Properties      height  calc var --vh  1vh    100

User · Answer

As I am new  I can t comment on other answers   If someone is looking for an answer to make this work  and can use javascript - as it seems to be required to make this work at the moment  this approach has worked pretty well for me and it accounts for mobile orientation change as well  I use Jquery for the example code but should be doable with vanillaJS   -First  I use a script to detect if the device is touch or hover  Bare-bones example   if   ontouchstart  in document documentElement        document body classList add  touch-device       else       document body classList add  hover-device        This adds class to the body element according to the device type  hover or touch  that can be used later for the height script   -Next use this code to set height of the device on load and on orientation change   if  jQuery  body   hasClass  touch-device        Loading height on touch-device     function calcFullHeight             jQuery   hero-section   css  height     window  height                 function              calcFullHeight             jQuery window  on  orientationchange   function                    500ms timeout for getting the correct height after orientation change             setTimeout function                     calcFullHeight                   500                       jQuery      else       jQuery   hero-section   css  height    100vh          -Timeout is set so that the device would calculate the new height correctly on orientation change  If there is no timeout  in my experience the height will not be correct  500ms might be an overdo but has worked for me    -100vh on hover-devices is a fallback if the browser overrides the CSS 100vh

User · Answer

in my app I do it like so  typescript and nested postcss  so change the code accordingly    const appHeight        gt        const doc   document documentElement     doc style setProperty  --app-height      window innerHeight px     window addEventListener  resize   appHeight  appHeight     in your css    root      --app-height  100      html  body       padding  0      margin  0      overflow  hidden      width  100vw      height  100vh        media not all and  hover hover            height  var --app-height             it works at least on chrome mobile and ipad  What doesn t work is when you add your app to homescreen on iOS and change the orientation a few times - somehow the zoom levels mess with the innerHeight value  I might post an update if I find a solution to it   Demo

User · Answer

Using vh on mobile devices is not going to work with 100vh  due to their design choices using the entire height of the device not including any address bars etc   If you are looking for a layout including div heights proportionate to the true view height I use the following pure css solution    root     --devHeight  86vh     This value changes     div      height  calc var --devHeight  0 10     change multiplier to suit required height     You have two options for setting the viewport height  manually set the --devHeight to a height that works  but you will need to enter this value for each type of device you are coding for   or  Use javascript to get the window height and then update --devheight on loading and refreshing the viewport  however this does require using javascript and is not a pure css solution   Once you obtain your correct view height you can create multiple divs at an exact percentage of total viewport height by simply changing the multiplier in each div you assign the height to   0 10   10  of view height 0 57   57  of view height  Hope this might help someone

User · Answer

As I was looking for a solution some days  here is mine for everyone using VueJS with Vuetify  my solution uses v-app-bar  v-navigation-drawer and v-footer   I created App scss  used in App vue  with the following content    x000D   x000D   v-application   x000D      height  100vh  x000D      height  -webkit-fill-available  x000D    x000D   x000D   v-application--wrap   x000D      min-height  100vh  important  x000D      min-height  -webkit-fill-available  important  x000D    x000D   x000D   x000D

User · Answer

The following worked for me   html   height  100vh     body     top  0    left  0    right  0    bottom  0    width  100vw        this is the container you want to take the visible viewport        make sure this is top-level in body     your-app-container     height  100       The body will take the visible viewport height and  your-app-container with height  100  will make that container take the visible viewport height

User · Answer

Hopefully  this will be a UA-defined CSS environment variable as suggested here  https   github com w3c csswg-drafts issues 2630 issuecomment-397536046

User · Answer

nils explained it clearly    What s next then   I just went back to use relative  classic     percentage  in CSS   It s often more effort to implement something than it would be using vh  but at least  you have a pretty stable solution which works across different devices and browsers without strange UI glitches

User · Answer

Look at this answer  https   css-tricks com the-trick-to-viewport-units-on-mobile    x000D   x000D     First we get the viewport height and we multiple it by 1  to get a value for a vh unit x000D  let vh   window innerHeight   0 01  x000D     Then we set the value in the --vh custom property to the root of the document x000D  document documentElement style setProperty  --vh      vh px    x000D   x000D     We listen to the resize event x000D  window addEventListener  resize        gt    x000D       We execute the same script as before x000D    let vh   window innerHeight   0 01  x000D    document documentElement style setProperty  --vh      vh px    x000D      x000D  body   x000D    background-color   333  x000D    x000D   x000D   module   x000D    height  100vh     Use vh as a fallback for browsers that do not support Custom Properties    x000D    height  calc var --vh  1vh    100   x000D    margin  0 auto  x000D    max-width  30   x000D    x000D   x000D   module  item   x000D    align-items  center  x000D    display  flex  x000D    height  20   x000D    justify-content  center  x000D    x000D   x000D   module  item nth-child odd    x000D    background-color   fff  x000D    color   F73859  x000D    x000D   x000D   module  item nth-child even    x000D    background-color   F73859  x000D    color   F1D08A  x000D    x000D   lt div class  module  gt  x000D     lt div class  module  item  gt 20  lt  div gt  x000D     lt div class  module  item  gt 40  lt  div gt  x000D     lt div class  module  item  gt 60  lt  div gt  x000D     lt div class  module  item  gt 80  lt  div gt  x000D     lt div class  module  item  gt 100  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I came up with a React component     check it out if you use React or browse the source code if you don t  so you can adapt it to your environment   It sets the fullscreen div s height to window innerHeight and then updates it on window resizes

User · Answer

Try html  body   height  100    for something to the effect of 100vh on mobile devices

User · Answer

You can try giving position  fixed  top  0  bottom  0  properties to your container

User · Answer

You can try min-height  -webkit-fill-available  in your css instead of 100vh  It should be solved

User · Answer

The following code solved the problem  with jQuery     var vhHeight      body   height    var chromeNavbarHeight   vhHeight - window innerHeight     body   css   height  window innerHeight  marginTop  chromeNavbarHeight       And the other elements use   as a unit to replace vh

User · Answer

Unfortunately this is intentional    This is a well know issue  at least in safari mobile   which is intentional  as it prevents other problems  Benjamin Poulain replied to a webkit bug   This is completely intentional  It took quite a bit of work on our part to achieve this effect     The base problem is this  the visible area changes dynamically as you scroll  If we update the CSS viewport height accordingly  we need to update the layout during the scroll  Not only that looks like shit  but doing that at 60 FPS is practically impossible in most pages  60 FPS is the baseline framerate on iOS   It is hard to show you the    looks like shit    part  but imagine as you scroll  the contents moves and what you want on screen is continuously shifting  Dynamically updating the height was not working  we had a few choices  drop viewport units on iOS  match the document size like before iOS 8  use the small view size  use the large view size  From the data we had  using the larger view size was the best compromise  Most website using viewport units were looking great most of the time   Nicolas Hoizey has researched this quite a bit  https   nicolas-hoizey com 2015 02 viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers html No fix planned At this point  there is not much you can do except refrain from using viewport height on mobile devices  Chrome changed to this as well in 2016   https   groups google com a chromium org forum   topic blink-dev BK0oHURgmJ4 https   developers google com web updates 2016 12 url-bar-resizing

User · Answer

I just found a web app i designed has this issue with iPhones and iPads  and found an article suggesting to solve it using media queries targeted at specific Apple devices   I don t know whether I can share the code from that article here  but the address is this  http   webdesignerwall com tutorials css-fix-for-ios-vh-unit-bug  Quoting the article   just match the element height with the device height using media queries that targets the older versions of iPhone and iPad resolution    They added just 6 media queries to adapt full height elements  and it should work as it is fully CSS implemented   Edit pending  I m unable to test it right now  but I will come back and report my results

User · Answer

For many of the sites I build the client will ask for a 100vh banner and just as you have found  it results in a bad  jumpy  experience on mobile when you begin to scroll  This is how I solve the problem for a smooth consistent experience across all devices   I first set my banner element CSS to height 100vh  Then I use jQuery to get the height in pixels of my banner element and apply an inline style using this height   var viewportHeight       banner   outerHeight        banner   css   height  viewportHeight       Doing this solves the issue on mobile devices as when the page loads  the banner element is set to 100vh using CSS and then jQuery overrides this by putting inline CSS on my banner element which stops it from resizing when a user begins to scroll   However  on desktop if a user resizes their browser window my banner element won t resize because it now has a fixed height set in pixels due to the above jQuery  To address this I use Mobile Detect to add a  mobile  class to the body of my document  And then I wrap the above jQuery in an if statement   if     body   hasClass  mobile        var viewportHeight       banner   outerHeight          banner   css   height  viewportHeight         As a result  if a user is on a mobile device the class  mobile  is present on the body of my page and the above jQuery is executed  So my banner element will only get the inline CSS applied on mobile devices meanwhile on desktop the original 100vh CSS rule remains in place

User · Answer

The VH 100 does not work well on mobile as it does not factor in the iOS bar  or similar functionality on other platforms   One solution that works well is to use JavaScript  quot window innerHeight quot   Simply assign the height of the element to this value e g      element-name   height window innerHeight   Note  It may be useful to create a function in JS  so that the height can change when the screen is resized  However  I would suggest only calling the function when the width of the screen is changed  this way the element will not jump in height when the iOS bar disappears when the user scrolls down the page

User · Answer

Because it won t be fixed  you can do something like     html  lt body gt     lt div class  content  gt       lt  -- Your stuff here -- gt     lt  div gt   lt  body gt     css  content     height  80vh      For me it was the fastest and more pure solution than playing with the JavaScript which could not work on many devices and browsers    Just use proper value of vh which fits your needs

User · Answer

A nice read about the problem and its possible solutions can be found in this blog post  Addressing the iOS Address Bar in 100vh Layouts The solution I ended up in my React application is utilising the react-div-100vh library described in the post above

[html] CSS3 100vh not constant in mobile browser

Examples related to html

Examples related to css

Examples related to viewport-units