openui5
openui5 copied to clipboard
SAP
Scroll is always visible on Chrome
OpenUI5 version: 1.104 (but also in older versions)
Browser/version (+device/version): Chrome v104.0
Any other tested browsers/devices(OK/FAIL): Firefox - works ok - the scroll is hidden if inactive
URL (minimal example if possible): https://openui5.hana.ondemand.com/
Steps to reproduce the problem:
- Go the URL
- See the scrollbar
- on Chrome - always visible
- on Firefox - using the default scroll - it appears only when scrolling
What is the expected result? On Chrome to use the default scroll - not to override it with custom styles that breaks the default behaviour
What happens instead? scroll is always visible - if you have multiple containers it is very ugly
Any other information? (attach screenshot if possible)
If I manually disable these styles in the browser - the scroll fallback to default (wanted behaviour)
Scroll on Chrome:
Scroll on Firefox:
Hello @DenisDuev as this is some native browser behaviour I am closing the issue
UI5 styles break the default browser behaviour
@DenisDuev, hiding the scroll bar when not scrolled is an experimental behaviour, available under the flag chrome://flags/#overlay-scrollbars. Without this flag Chrome shows a scrollbar permanently.
But of course, it is great if UI5 would support such behaviour in Chrome.
Hello,
We asked for design feedback and will be back to you.
Just keep in mind what you describe as issue is default behavior. Example scroll container: https://sdk.openui5.org/entity/sap.m.ScrollContainer/sample/sap.m.sample.ScrollContainer . Scrollbar appearance is defined not by the Demo Kit but by the underlying controls from the standard UI5 library.
However, there is a setting that can be used to instruct the controls to delegate scroll styling to the browser which can help in this case.
Best regards, Jordan
Hi @jdichev,
What is this setting that you've mentioned in your comment?
However, there is a setting that can be used to instruct the controls to delegate scroll styling to the browser which can help in this case.
Hello @DenisDuev,
The setting I meant is a class "sapUiNativeScrollbars" that can be applied to root html element and would tell all controls that would respected that to avoid styling scrollbars. This is not something documented but can be found in the code therefore should be used with caution.
Best regards, Jordan