Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Container lags on iPhone #16

Open
l174rd opened this issue Oct 29, 2014 · 9 comments
Open

Container lags on iPhone #16

l174rd opened this issue Oct 29, 2014 · 9 comments
Labels

Comments

@l174rd
Copy link

l174rd commented Oct 29, 2014

Hi,
I implemented Scroll-up-bar in a project. When I scroll down on the iPhone screen, the topbar hides, but if I scroll down again, the topbar-container doesn't hide automatically. It hides for a short time and appears again. Can anyone reproduce this or does anyone know what kind of bug this is?

I initiate the scrollbar like this:

$('#topbar').scrollupbar();

My HTML markup:

<div id="topbar" class="navbar">
    <div class="topbar-inner">
        <ul id="mobile-navigation" class="nav menu">
            <li>foo</li>
            <li>bar</li>
        </ul>
    </div>
</div>

My LESS file:

#topbar {
    box-sizing: border-box;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1337;
    margin-bottom: 0;
    position: absolute;

    .topbar-inner {
        background: @bodyFontColor;
        height: 100%;
    }
}

The other problem is when I click on the button to collapse in the menu, it expands the bootstrap navbar but it wiggles. Can you help me out?

@eduardomb
Copy link
Owner

Hi, that's odd. Can you send me a plunker with this problematic behaviour?

@l174rd
Copy link
Author

l174rd commented Oct 30, 2014

I created a plunker here (http://embed.plnkr.co/wCuGNAewL6eZYLEPTwVs/preview) but it's not working in the iOS Simulator. The scrollbars are kind of weird on plunker.

I uploaded the recorded screen from the iOS Simulator, so now you can see what's going on there and you understand my problem.

You can watch the video here

@l174rd
Copy link
Author

l174rd commented Nov 4, 2014

Any idea?

@eduardomb
Copy link
Owner

I've emulated iOS with google chrome emulator and it worked, but I had to scroll by dragging. I guess this is a emulation only issue. This happens because on iOS the plugin binds the touch event. This won't be a problem on a real device because the page moves by touch, not scroll.

@l174rd
Copy link
Author

l174rd commented Nov 6, 2014

I've also tested this on my real iOS Device (iPhone 5) and the problem is the same…

@eduardomb
Copy link
Owner

I'll debug it and try to fix it ASAP.

@eduardomb eduardomb added the bug label Nov 6, 2014
@bknightly
Copy link

I added Scroll Up Bar to a web site I'm developing and am able to replicate the same bug that @l174rd mentioned on my iPhone 5s and iOS Simulator (4s, 5, 5s, 6, and 6 Plus). The feature seems to work nicely on desktop though. Do you have any recommendations for a clever way I could conditionally load this feature for non-mobile devices until the bug is fixed, @eduardomb? Thanks in advance for any insight you can offer.

@webyak
Copy link

webyak commented Feb 26, 2015

any updates on this?

@naton
Copy link

naton commented Nov 26, 2015

I think it might be fixable using transform3d() before switching position value.

Try this (the first css line is the new one, the others are already there):

$bar.css({
'transform': 'translate3d(0px,0px,0px)', // Fix for iOS invisible element bug when changing position values while scrolling
'position': 'absolute',
'top': lastY > minY ? lastY : initialPosTop
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants