search

vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
http://clarity.design
MIT License
6.43k stars 762 forks source link

Support Momentum Scrolling on .main-container #71

Closed JohannesRudolph closed 7 years ago

JohannesRudolph commented 7 years ago

Select one ... (check one with "x")

[x] bug
[x] feature request
[ ] enhancement

Expected behavior

The main container should support momentum scrolling on iOS devices.

Actual behavior

The main container does not scroll nicely on iOS devices (tested with iPad on iOS 9).

Reproduction of behavior

E.g. the clarity docs site:

Adding this css fixes the issue: 

.main-container {
  /* has to be scroll, not auto */
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

Environment details

mathisscott commented 7 years ago

Quick question.

This works fine on iPhone 6 and iPhone 5. We are applying -webkit-overflow-scrolling: touch; responsively.

So I am wondering if you're using iPad in portrait or landscape mode? Maybe there is an issue with the breakpoint?

Thanks.

JohannesRudolph commented 7 years ago

Thanks for the quick response @mathisscott, using iPad in Landscape mode os it's above the breakpoint. Momentum scrolling should work regardless of breakpoint. You can also reproduce this in Safari Mobile using Xcode's iOS Device Simulator.

mathisscott commented 7 years ago

Yup. I've reproduced some bad issues with an iPad in landscape mode. Thanks for bringing them to our attention. In portrait mode, the site appears to do fine. But we need to fix a bunch of issues with landscape mode, mostly around responsive breakpoints.

Thanks for pointing this out, @JohannesRudolph.

github-actions[bot] commented 3 years ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.