[combo-box] Scroll bar is not visible on iOS

[knoobie]

Description

There is no scroll bar for lazy loading / big data sets in a combo box on iOS. This works on desktop (e.g. firefox / ubuntu) but is not visible on iOS 15 safari

Expected outcome

There is a scrollbar; even on iOS.

Minimal reproducible example

• https://vaadin.com/components/vaadin-combo-box/html-examples/combo-box-basic-demos#lazy-loading
• https://a11y-vaadin-playground.netlify.app/pages/v21/combo-box.html
• https://a11y-vaadin-playground.netlify.app/pages/v22/combo-box.html

Steps to reproduce

1. Open one of the example on iOS
2. Open the combo box and expect a scrollbar because of the amount of items

Environment

• V14, V21, V22
• iOS 15

Browsers Affected

• iOS Safari

[web-padawan]

Thanks for the issue. The are some old workarounds related to scrollbar appearance in Safari:

web-components/packages/combo-box/src/vaadin-combo-box-scroller.js

Lines 29 to 30 in 30d3da8

	/* Fixes item background from getting on top of scrollbars on Safari */
	transform: translate3d(0, 0, 0);

web-components/packages/combo-box/src/vaadin-combo-box-scroller.js

Lines 35 to 36 in 30d3da8

	/* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
	box-shadow: 0 0 0 white;

The same code is present in V14 also but in a different file - see it here.

[vursen]

I'm not sure if the initially invisible scrollbar on iOS is actually an issue. That's how scrollbars work in Mobile Safari by default. Look at the scrollbar in the video recorded on iOS 15, the scrollbar appears only after you start scrolling:

Screen.Recording.2021-10-13.at.15.03.36.mov

[knoobie]

Hmm.. weird.. here is a video of my phone

iPhone 12 Pro; iOS 15.0.1

IMG_7140.MP4

[vursen]

I checked it on my iPhone XR iOS 15.0.1, the scrollbar works fine. I wonder if the issue is somehow related to the fact of using iPhone 12 with iOS 15.0.1 on board.

[knoobie]

I really have no clue.. I just tested it with my work phone (iPhone 8 with iOS 14.7.1) and there is it missing as well. Going to re-test it, once the iOS 14.8 update is applied.

Edit: Same behavior (no scroll bar) on iPhone 8 with iOS 14.8

[jouni]

No scrollbar for me either. iPhone 8, iOS 14.8.

The iOS scrollbars are brittle on overflow: auto elements, according to my experience. I recall us having this same issue in Grid in the early days.