erikbaars

Stopping the mobile vh stutter

The CSS selector for vertical height (for example width:100vh for a full height div) offers a super easy way to setup beautiful full-width and full-height div blocks for images or sliders.

However, an issue arises on mobile devices when you start scrolling the vertical-height changes as you scroll due to the nav-bars disappearing.

To overcome this you can add a few media queries targeting as many devices specifically as you’d like:

Disclosure, I found this online… but can’t remember where I did so, posting it here for me to remember the trick.

/* Queries for ios, to try to avoid the the stutter - specifically ios */
/* **************** */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    #banner, .bannerimage {                           
        height:calc(1024px - 140px);                         
    }                       
}   
                                            
/* iPad with landscape orientation. */                       
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {                         
    #banner, .bannerimage {                           
        height:calc(768px - 140px);                         
    }                      
}
                                               
/* iPhone 5 
You can also target devices with aspect ratio. */                       
@media screen and (device-aspect-ratio: 40/71) {                              
    #banner, .bannerimage {                           
        height:calc(500px - 140px);                         
    }                       
}