fix(cxl-lumo-styles): show scrollbar on Mac/iOS

[anoblet]

Clickup: https://app.clickup.com/t/861mkj72q

Screenshot:

[github-actions]

size-limit report 📦

Path	Size
packages/cxl-ui/pkg/dist-web/cxl-ui.js	33.54 KB (-0.08% 🔽)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js	11.87 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js	24.95 KB (+0.2% 🔺)
packages/cxl-ui/pkg/dist-web/vendor.js	125.6 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js, packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js, packages/cxl-ui/pkg/dist-web/cxl-ui.js, packages/cxl-ui/pkg/dist-web/manifest.js, packages/cxl-ui/pkg/dist-web/unresolved.js, packages/cxl-ui/pkg/dist-web/vendor.js	197.12 KB (+0.02% 🔺)

[lkraav]

Code lgtm. But can we also get input from Vaadin Discord about this? This sounds like an accessibility problem Vaadin wants to know about. Are we maybe missing something they already have?

[pawelkmpt]

I tested on macOS:

• Chrome, Opera: do not show scrollbar,

• Safari: shows scrollbar,
• Firefox: shows when submenu opens and disappears after while.

[anoblet]

@pawelkmpt You're right. I tested macOS/Safari hoping it was the usual culprit, though it seems as if there's an issue with other combinations. I asked in the Vaadin Discord if they were aware of the issue, and they are, though it doesn't seem as if they intend to fix it (https://discord.com/channels/732335336448852018/1100064173431464016/1100064173431464016).

I did some research as to why iOS 14 decided to drop custom scrollbars entirely and came across this article: https://medium.com/@craigmroberts/creating-custom-scrollbars-for-your-website-as-a-web-component-a-workaround-for-ios-safari-c5f6def5b408

It seems a bit heavy for our use case, and would require some JS in order to get working (with Vaadin), though if this is the route we would want to take, I'm willing to take a shot at it.

[pawelkmpt]

@anoblet thanks for sharing these links. They gave me an overview on the problem.

I did some research as to why iOS 14 decided to drop custom scrollbars entirely and came across this article: https://medium.com/@craigmroberts/creating-custom-scrollbars-for-your-website-as-a-web-component-a-workaround-for-ios-safari-c5f6def5b408

It seems a bit heavy for our use case, and would require some JS in order to get working (with Vaadin), though if this is the route we would want to take, I'm willing to take a shot at it.

I don't think we should develop custom scrollbars. It's always maintenance burden and big risk of being incompatible on some device. I'd rather keep as it is or think about visual cue for users eg. arrow, shadow, or bottom menu item being cut like that:

@lkraav @heshfekry your opinions?

[anoblet]

@pawelkmpt I believe we could add a semi-transparent bar to the bottom of the submenu that contains a downward arrow. As long as the user isn't at the bottom of the list, have it show, otherwise hide it.

[heshfekry]

@pawelkmpt @anoblet definitely dont want custom scrollbars or anything heavy.

Maybe we can have a little check in the wild to see if there any examples of the visual cues. Maybe there is some more familiar to users.

[pawelkmpt]

I just noticed scroller while looking at components: https://vaadin.com/docs/latest/components/scroller

Maybe we can have a little check in the wild to see if there any examples of the visual cues. Maybe there is some more familiar to users.

One of the Vaadin components had horizontal cue but I don't remember which one.

[pawelkmpt]

https://vaadin.com/docs/latest/components/tabs/#orientation-overflow

Vertical and horizontal tabs