md-tabs: scroll shouldn't be visible on mobile

[kkachniarz220]

What is affected?

Component

Description

There is no scroll in specs: https://m3.material.io/components/tabs/guidelines#b0e3794c-059f-41e2-87a6-fe2498fc7fe8

Reproduction

not applicable

Workaround

not applicable

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.3.0

Browser/OS/Node environment

Chrome 121.0.6167.187
Windows 11

[vdegenne]

Shouldn't this be left to the developer to decide?

In the specifications GIF image you provided it's easy to tell it can be scrolled because the text is cropped, but in some other cases it may not be that obvious and the scrollbar (which is furtively shown on mobile devices) gives a hint to the users that the area can be scrolled. Without it they may lose a chance to know that there are more options to look at on the right.

[kkachniarz220]

perhaps there are guidelines regarding the width of items so that the last visible one is cut off

[CicciLeo]

Shouldn't this be left to the developer to decide?

In the specifications GIF image you provided it's easy to tell it can be scrolled because the text is cropped, but in some other cases it may not be that obvious and the scrollbar (which is furtively shown on mobile devices) gives a hint to the users that the area can be scrolled. Without it they may lose a chance to know that there are more options to look at on the right.

Actually, in https://m3.material.io/components/tabs/guidelines#e8be085b-7b39-4dbe-b8ec-cfa15c8d809a is specified that

"When using scrollable tabs, the first visible tab should be offset by 52dp from the left side of the device for both web and mobile." , precisely to indicate that it is scrollable

so the scrollbar can be omitted, at least on mobile. on the web, however, it should be possible to modify it, as the standard one is unsightly

[asyncLiz]

Speaking from memory, I'm pretty sure whether or not a scrollbar appears is dependent on the browser, OS, and user preferences. For example, in Chrome on my Android Pixel, a scrollbar does not appear on the tabs page.

We use overflow: auto, which tells the browser to only display a scrollbar if the content is overflowing. In practice, how browsers implement this UX varies between browsers and platforms (Chrome on Windows has different scrollbar behaviors compared to Chrome on Mac OS).

You mentioned in your issue the platform is Chrome on Windows. Is there a mobile device that is displaying unexpected scrollbars?

[kkachniarz220]

Yes,
Chrome and Safari on iOS 17.3.1