Demo: Poor Scrolling UX on Mobile

[jpdevries]

Demo at http://x-tag.github.io does not support smooth momentum scrolling on iOS. Since it only supports tap to start/stop time it seems like the example should be geared towards mobile.

Steps to Reproduce

• Visit http://x-tag.github.io on iPhone
• Attempt to Scroll
• Notice jerky / sticky scrolling

[csuwildcat]

@jpdevries This may be due to the scroll being inside a Flexbox element, or maybe there's a Webkit specific smooth scrolling CSS property that we left out - I will take a look.

[jpdevries]

Cool. I would try this https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

Might also be able to let the body grow, not use overflow at all, and use position:sticky to make the top bar persistent

[csuwildcat]

I'll add whatever Webkit allows for this, and I am working on another
component that leverages body scroll for max perf. Unfortunately, for
compatability reasons, I probably won't use sticky (but would like to)
because it isn't supported as widely as we'd like :/
On Jun 5, 2016 6:19 PM, "JP DeVries" [email protected] wrote:

Cool. I would try this
https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

Might also be able to let the body grow, not use overflow at all, and use
position:sticky to make the top bar persistent

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#159 (comment), or mute
the thread
https://github.com/notifications/unsubscribe/AAICyu5t52YFb_k1sIfcbY4aZCV2guReks5qI3WLgaJpZM4IqXRx
.

[csuwildcat]

I am landing an even better solution today: I have created a new component that does page/view switching that allows you to use the native body scroll (the most performant scrolling on a device), while still providing the app layout with a fixed top/bottom header and footer.

[csuwildcat]

The new x-page component is finished, and it enables 100% native body scroll while still maintaining dynamic single page switching with fixed headers/footers (something that plagues most other implementations that apply transforms to parent elements of fixed children): https://github.com/x-tag/page