My Page Jumps Down, Only on Mobile

[kevmon]

Hey Everyone,

Would really love some help here as I’m totally stumped. My site

firsttestshop-2.myshopify.com

Jumps down some pixels after scrolling down slightly on a mobile phone (can’t reproduce this in the browser). I’m using a sticky header and some very simple jQuery that just adds/removes a class. I have a feeling is JS related.

Any Idea? Thanks in advance!

[Beverleyh]

Not seeing it on iPhone 5S

[kevmon]

Weird, it’s definitely happening in Chrome on my Galaxy a7 and my buddy’s iPhone 6. I’m noticing something though. I believe it has to do the Chrome’s address bar menu that’s originally at the top. It seems like the screen repositions itself when you scroll it out of view.

When you scroll down a bit, the problem only happens when the address bar appears fully and then disappears fully.

Anyone ever have this issue before?

[grebre0]

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);
});

[kevmon]

Thanks for the help narrowing it down, but the code unfortunately doesn’t work. I added a couple of semi-colons and curly brackets as to keep it from throwing an error, but the problem still persists.

I also tried setting the height manually to 360px but that doesn’t work either. I feel like we’re on the right track though.

Any other ideas? Thanks!

[grebre0]

Yep, my mistake

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);
});

[kevmon]

Thanks, after finally understanding your code I see what you are trying to do. But I think that the problem is that even though min-height is controlled through your code, “height” is still set at “100vh”, which is the main problem here.

The only way I’ve been able to fix it is to make height, min-height, and max-height all the same value under the mobile breakpoint.

Thanks so much for helping me narrow it down!

[Author]

Posts