Sticky header behaviour on mobile platforms

[Liam J]

Liam J

November 2, 2017 at 2:10 pm

Hi

I was actually going to start a topic about this a while ago but then thought I had managed to solve the issue by chance. However, I am still seeing some specific issues.

The problem:

I wanted to use a sticky header (without the topber) on mobile platforms, so activated this option in the Theme Options. However, I quickly realised that there is a significant problem with the mobile sticky header (certainly on iOS devices) where the header, or part of, disappears out of the viewport when scrolling from a point on a page back to the top; when doing this on iOS when you reach the top again, there is a ‘bounce’ of the page and it is a this point that the header can disappear.

I did not know how to fix this but, whilst continuing with site design, I decided to add a drop-shadow to the sticky mobile header once scrolling has been initiated and achieved this with the following css:

.sticky-wrapper.is-sticky .mobile-headerclass {
-webkit-box-shadow: 0px 3px 3px 0px rgba(50,50,50,0.2);
-moz-box-shadow: 0px 3px 3px 0px rgba(50,50,50,0.2);
box-shadow: 0px 3px 3px 0px rgba(50,50,50,0.2);
}

An unexpected benefit of this code was that it appeared to fix the issue of the header ‘bouncing’ out of the viewport. I tested this on a number of mobile devices and browsers and thought it solved the problem on all (not that I have worked out why it solves the problem). However, I happen to own an iPad Mini 3 and have just noticed that, for some reason, the above css does not solve the disappearing header issue on this particular device; strangely, the issue is present on this iPad Mini 3 in both Safari and Firefox. I’m a little perplexed as I’m certain that the screen resolution on my iPad Mini 3 is exactly the same as on the iPad 4 that I also test on and, with the iPad 4, the issue is resolved by the above css.

Any thoughts on what is going on and how to really fix the bouncing issue on all mobile devices would be appreciated.

Many thanks

Miranda