search

x-tag / core

The Heart of X-Tag
http://x-tag.github.io/
Other
1.25k stars 151 forks source link

Demo: Poor Scrolling UX on Mobile #159

Open jpdevries opened 8 years ago

jpdevries commented 8 years ago

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

csuwildcat commented 8 years ago

@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 commented 8 years ago

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 commented 8 years ago

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" notifications@github.com 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 https://github.com/x-tag/core/issues/159#issuecomment-223850623, or mute the thread https://github.com/notifications/unsubscribe/AAICyu5t52YFb_k1sIfcbY4aZCV2guReks5qI3WLgaJpZM4IqXRx .

csuwildcat commented 7 years ago

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 commented 7 years ago

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