search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.15k stars 2.15k forks source link

[tabs] scrolling bounces twice in iOS safari #5624

Open leftglass opened 4 years ago

leftglass commented 4 years ago

Bug report

Scrolling bounces twice in iOS when you use tabs. It's ugly.

Steps to reproduce

  1. Go to https://material-components.github.io/material-components-web-catalog/#/component/tabs using iOS safari. 2-1. Flick tabs just below 'Tabs with icons next to labels' in Demos. 2-2. Flick tabs just below 'Tabs with icons above labels and indicators restricted to content' in Demos. 2-3. Flick tabs just below 'Scrolling tabs' in Demos.(It is rather smooth, but it becomes ugly same as 2-2 and 2-1 when the number of tabs is smaller than this Demos, for instance, four tabs.)

  2. See tabs bounce twice at the end.

Actual behavior

Scrolling bounces twice in iOS when you use tabs. It's ugly when the length of tabs is a little larger than the device width so that tabs reaches the end quickly and bounces twice unsmoothly.

Expected behavior

https://www.google.com/search?q=a Visit the above url and see the tabs of navigation. It bounces differently. It bounces once and calmly in iOS safari.

Your Environment:

Software Version(s)
MDC Web latest(You can experience the issue on the MDC Web Demo page.)
Browser safari
Operating System iOS 13.3
EstebanG23 commented 4 years ago

Thank you for reporting. I was able to reproduce the bug and will move to backlog to investigate.