Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript My Page Jumps Down, Only on Mobile Reply To: My Page Jumps Down, Only on Mobile

#245646
grebre0
Participant

It looks like it jumps because of Chrome top bar. When visible this bar changes window height (viewport height).

The problem is that your .video-content block height is set to 100vh. So, when bar is visible, viewport is getting smaller as well as .video-content block and all of the content above jump to the top a little.

The task is to make the height of .video-content block equal to 100vh. But it should be fixed value so that it not react to the top bar.
Leave your css as it is and consider this javascript solution

function setHeight() {
   var windowHeight = $(window).height(),
          $block = $('.video-content');
    if(windowHeight > 550) { // 550px is your css min-height for this block
        $block.css('min-height': windowHeight + 'px') 
    } else {
       $block.css('min-height': '') 
    }
}

$(document).ready(function() {
    setHeight();
   $(window).on('resize orientationchange', setHeight);
});