[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.

[knoobie]

Because of Jouni's comment.. I tested the V14 Grid (https://vaadin.com/components/vaadin-grid/html-examples) with firefox on ubuntu I have a scroll bar; with my iPhone I don't have a scroll bar there.. looks like the problem is not limited to the combo box. :(

[vursen]

I'm trying to figure out whether the issue is caused by the latest a11y refactoring. Is the combo-box's scrollbar invisible even in Vaadin 21?

https://a11y-vaadin-playground.netlify.app/pages/v21/combo-box.html

cc @knoobie @jouni

[knoobie]

I don't think it's related to the a11y changes because it is already present in V14 - retested the V21 page and have no scroll bar on both phones (iPhone 12 Pro and iPhone 8) both running the latest 15.0.2.

[web-padawan]

As I mentioned above we use the same CSS rules for both V14 and V22 - these are just placed in different files.
So it does make sense to assume the fix should be the same regardless of DOM structure changes in V22.

[knoobie]

Added a video from V14 docs

IMG_7146.MP4

I noticed something funny.. could it be possible that there is a scrollbar but we can't see it cause of coloring?

See e.g.

You see the scrollbar in the first screen shot.. but scrolling back to the top.. it looks like the scrollbar is vanishing behind the content

[jouni]

I think iOS and macOS have some heuristic for determining whether to use white or black for the scrollbar (with opacity). On the a11y test page, I would assume it would be black, as the page background is white.

[web-padawan]

See also #1930 (that issue is quite old so I closed it as a duplicate of this one).