search

googlearchive / core-scroll-header-panel

Fancy scrolling effects where the header animates between tall and condensed states
19 stars 16 forks source link

Jerky behavior in "web app" mode on iOS #31

Open nomego opened 9 years ago

nomego commented 9 years ago

Ok so this is a pretty specific bug and more because of Apple "web app" behavior differences, but I'm hoping it can be solved in polymer anyway or we'll have to adjust our UI :(

When using the CSHP (for example https://www.polymer-project.org/components/core-scroll-header-panel/demo.html) in iOS 8.1.2 Safari on iPad mini, performance is good, events are properly triggered, etc.

But when run in "web app" mode (Add to home screen), scrolling behaves differently.

If I'm at the top of the page and quickly flick the page up (to scroll down), the header panel stays in it's big, expanded mode until the scrolling has stopped completely on it's own. Same goes for the reverse, if I scroll down so the CSHP gets hidden and quickly flick the page down (to scroll back up), the "small" CSHP gets shown, but the expanded CSHP won't show until the page has rubber band "bounced" on the top and come to a complete stop.

Apparently this can cause pretty weird laggy/jerky behavior when "playing" with the page, where the CSHP gets "stuck" for a while, anything between just a little bit shown to completely shown.

Is this a known limitation / behavior?

ebidel commented 9 years ago

The old UIWebview and 'add to homescreen apps' use the old scrolling behavior in iOS7. iOS changes the behavior of painting on scroll events, but homescreen apps didn't get the change :( I suspect this is what you're seeing. CSHP doesn't update itself until you stop scrolling.

http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/

On Mon Jan 19 2015 at 10:09:25 AM nomego notifications@github.com wrote:

Ok so this is a pretty specific bug and more because of Apple "web app" behavior differences, but I'm hoping it can be solved in polymer anyway or we'll have to adjust our UI :(

When using the CSHP (for example https://www.polymer-project.org/components/core-scroll-header-panel/demo.html) in iOS 8.1.2 Safari on iPad mini, performance is good, events are properly triggered, etc.

But when run in "web app" mode (Add to home screen), scrolling behaves differently.

If I'm at the top of the page and quickly flick the page up (to scroll down), the header panel stays in it's big, expanded mode until the scrolling has stopped completely on it's own. Same goes for the reverse, if I scroll down so the CSHP gets hidden and quickly flick the page down (to scroll back up), the "small" CSHP gets shown, but the expanded CSHP won't show until the page has rubber band "bounced" on the top and come to a complete stop.

Apparently this can cause pretty weird laggy/jerky behavior when "playing" with the page, where the CSHP gets "stuck" for a while, anything between just a little bit shown to completely shown.

Is this a known limitation / behavior?

— Reply to this email directly or view it on GitHub https://github.com/Polymer/core-scroll-header-panel/issues/31.

nomego commented 9 years ago

Oh wow.. that's really bad :/

Would you consider changing the behavior on browsers that have the "window.navigator.standalone" property and set to true? Since the only browser implementing it is iOS Safari and any iOS Safari running standalone mode will be running the iOS 7 implementation right now? Preferably an additional check can be done when this issue is resolved in future iOS versions.

We made a bottom bar that is completely shown as soon as you scroll up, but transitions in with CSS. This works since "iOS 7" will trigger the 'scroll' event twice, once as the scroll begins and once as the scroll finishes. This will at least not get stuck half way or freeze somewhere until the scroll is finished.