Hiding the address bar on iPhone/Android?

[hugoborjesson]

Question: I'm having trouble hiding the address bar on mobiles. I'm using snap.js with a fixed header at the top. Everything works fine, but I can't hide the address bar with:

setTimeout(function(){ window.scrollTo(0, 1); }, 0);

Is this because of snap.js? Is there a solution?

[felipefermin]

Same issue here. Darn address won't hide now.

[hugoborjesson]

I have a "sort of" working solution, with a modification of the script Nate Smith (https://gist.github.com/nateps/1172490) suggested. Only tested on iPhone, and it flickers a bit. Maybe someone can come up with something better?

[hugoborjesson]

        // Modified version of https://gist.github.com/nateps/1172490
        var page = document.getElementById('pageWrapper'),
            ua = navigator.userAgent,
            iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
            ipad = ~ua.indexOf('iPad'),
            ios = iphone || ipad,
            // Detect if this is running as a fullscreen app from the homescreen
            fullscreen = window.navigator.standalone,
            android = ~ua.indexOf('Android'),
            lastWidth = 0;

        setPageHeight();
        setTimeout(function() { window.scrollTo(0, 0); }, 8000);

        $('#contentWrapper').scroll(function (event) {
            var y = parseFloat($('#contentWrapper').scrollTop());
            if (y<-15) {
                resetPageHeight();
            } else if (y>60) {
                setPageHeight();
                setTimeout(function() { window.scrollTo(0, 0); }, 1);
            }
        });

        $(window).resize(function(){
            var pageWidth = page.offsetWidth;
            // Android doesn't support orientation change, so check for when the width
            // changes to figure out when the orientation changes
            if (lastWidth == pageWidth) return;
            lastWidth = pageWidth;
            setPageHeight();
            setTimeout(function() { window.scrollTo(0, 0); }, 1);
        });

        function setPageHeight() {
            if (ios) {
                if (iphone && !fullscreen) {
                    page.style.height = (document.documentElement.clientHeight + 60) + 'px';
                } 
            } else if (android) {
                page.style.height = (window.innerHeight + 56) + 'px'
            }
        };

        function resetPageHeight() {
            if (ios) {
                if (iphone && !fullscreen) {
                    page.style.height = document.documentElement.clientHeight + 'px';
                } 
            } else if (android) {
                page.style.height = window.innerHeight + 'px'
            }
        };

[hugoborjesson]

The original script would always hide the address bar. The changes I made was to make the address bar appear again if the user scrolls 15px above the top (elastic scroll) and then disappear again when scrolling down again (60px down)

[Christo44]

On the demo's included, my address bar is fixed to the top, and does not hide when I scroll down. Is there a way to override that so the address bar does disappear ?

[jstxx]

Easy CSS fix is to set your body's min-height to at least that of the page along with using the setTimeout(function(){ window.scrollTo(0, 1); }, 0); method. Setting it to 500px does the trick for iphone haven't tested with android.

[pcompassion]

same issue here, it's a real deal breaker. They should have stated it in the doc about this.

I found removing snap-content { overflow: auto } does the job, but it has other side-effects...

[andreaguarino]

up

[AfonsoFG]

up! anyone managed to fix this?

[AfonsoFG]

@hugoborjesson On the solution you propose how are #pageWrapper and #contentWrapper related?

the screen real estate of the URL address bar is very much needed ... can you give me a help here http://douro.ga ? I alreadyy tried everytging. I sure need some help here ...