CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dan Morris
Dan Morris

Reputation: 148

Issue with scrolling and position:fixed

I maintain a Web page that has buttons which are supposed to remain fixed relative to the window when you scroll around and/or jump to links within the page (one of the buttons takes you to a random link within the page). I do this with position:fixed, and I reposition the elements whenever I get callbacks for scrolling/resizing/URL changes. Code is below.

100% of the time on desktops, the right thing happens when I scroll or jump to a link within the page, and the buttons stay where they are.

But the behavior on Chrome for Android is:

In both of the broken cases, after the bug occurs (i.e., the buttons disappear), if I scroll down for maybe 10 lines, the buttons appear again. The callback to reposition the controls is getting called in these cases (based on printouts), but it doesn't position the elements correctly.

Good news, though… this bug is easily replicated in the Chrome Developer Tools.

There are a couple of pages exhibiting this issue; an easy one to load is:

http://awesomesongbook.com/soundtracks/soundtracks.html

Any advice?

Code follows.

Thanks!

$(window).load(function(){

    $(window).scroll(positionScroller);
    $(window).resize(positionScroller);
    $(window).bind('hashchange',positionScroller);

    positionScroller();

    function positionScroller()
    {
        $('#scroller').css('visibility','visible');

        if (window.screen.width > 800)
        {
            $('#scroller').css('position', 'fixed');
            $('#scroller').css('bottom',10);
            $('#scroller').css('right',10);                   
            $('#scroller').css('top','auto');
            $('#scroller').css('left','auto')
        }
        else
        {
            $('#scroller').css('position', 'fixed');            
            $('#scroller').css('top',5);
            $('#scroller').css('left',5);
            $('#scroller').css('bottom','auto');
            $('#scroller').css('right','auto');                       
        }
    };
});

Upvotes: 2

Views: 3119

Answers (2)

Dan Morris
Dan Morris

Reputation: 148

This appears to be a documented bug in Chrome for Android with position:fixed. I have not yet been able to digest the specific scope of the bug.

The least invasive solution I've seen online is to add this to the element in question:

-webkit-transform: translate3d(0, 0, 0);
transform : translate3d(0, 0, 0);

...but that didn't work for me.

What did work for me is disabling user scaling (pinch to zoom):

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

This is sub-optimal, because I'd prefer to leave user scaling enabled, but it does make the problem with position:fixed go away.

Upvotes: 1

MPaul
MPaul

Reputation: 2733

Is it absolutely necessary to rely on JavaScript? Best way to handle in my opinion is with pure CSS. Based on your code, you could use a media query to position the padding for the scroller.

#scroller {
    position:fixed;
    bottom:auto;
    right:auto;                   
    top:5px;
    left:5px;
}

@media all and (min-width: 801px)
{
    #scroller {
        bottom:10px;
        right:10px;                   
        top:auto;
        left:auto;
    }
}

Upvotes: 0

Related Questions