search

CenturyLinkCloud / Cyclops

The UX/UI Pattern Guide for the CenturyLink Platform
http://assets.ctl.io/cyclops
MIT License
20 stars 16 forks source link

Main-Nav, and other associated components, doesn't scroll properly on mobile. #101

Open ghost opened 7 years ago

ghost commented 7 years ago

When scrolling down the page, the main-nav component slowly eases to the top of the screen on desktop browsers, as well in mobile emulation. But, on an actual mobile device, the main-nav jumps around erratically.

On desktop, window.addEventListener('scroll', function() {}) is called continuously for every pixel scrolled, but mobile devices don't run the listener until the user has actually stopped scrolling completely. The only two ways around this that I've found:

  1. Get rid of the scrolling function, and just make the header and main-nav fixed.
  2. Use animations to mimic scrolling
osbornm commented 7 years ago

I agree that this behavior is not ideal and we have noticed it before. We are looking at using position: sticky to address this issue in v2.0.0