Firefox doesn't hide scrollbar styles

[christiemolloy]

Sequence and Tabs are examples of components that require scroll on overflow as per their designs. The scrollbar can be hidden in Chrome and Safari, however Firefox deprecated their scrollbar hidden styles. Below are points that have been discussed across the team when implementing sequence and tabs:

1. Firefox really doesn’t want us to hide scrollbars.

2. Setting a fixed height for Sequence/Tabs hides the scrollbar, but creates issues if the user wants to adjust tab padding/height.

3. Using a negative margin to hide the scrollbar messes up the perceived height on mobile (Matt Nolting tried).

4. Something like Shopify Polaris’ dropdown solution might work for Tabs, but not for Sequence. https://polaris.shopify.com/components/navigation/tabs#navigation

5. Sarah’s collapsing chevrons might make long sequences more manageable, but won’t apply to Tabs. https://codepen.io/srambach/pen/RMjEXB (edited)

6. If we go with the alternate solutions described in 4. and 5, that’s fine. These components definitely have similarities, but they also solve slightly different use cases, and I think it’s fine to provide design solutions that are tailored to their unique cases.

[matthewcarleton]

It's also worth considering leaving the default behaviour in Firefox. This will not be a popular opinion but if we are not revisiting design, then we should let the browser default to its default behaviour. This is better than a hacky solution.

[andybraren]

During today's meeting we agreed to proceed with what's already been built, but remove the height hack from the Sequence component and let Firefox do its own thing with scrollbars.

We also agreed that the left/right scroll button behavior in Sequence could be a little confusing (clicking a button only scrolls the div, it doesn't select the next step), but we'll test it out in a demo before exploring other options.

CSS Scroll Snap could be a viable interaction enhancement to the Sequence component, and possibly a replacement for the left/right scroll buttons if it works well enough. Browser support is decent, but Edge and Firefox are a little uncertain.

[andybraren]

I've created #870 to remind us to explore using Scroll Snap with Sequence in the future. This issue can probably be closed.