滚动和位置问题：已修复

Question

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:

• When I scroll down , the buttons stay where they belong
• When I scroll up , the buttons scroll away with the content
• When I jump to a link within the page, the right thing happens around 50% of the time.

In both of the broken cases, after the bug occurs (ie, 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');                       
        }
    };
});

Answer 1

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

Answer 2

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.