[Chrome UI] Change in scrollbar behavior shifts UI

[jamiesmith]

There was a change in the overall scrollbar behavior in Kibana, some time after 7.14.

In 7.x up to 7.14 the scrollbar disappeared when not scrolling which left a clean UI, but with more recent versions it is basically hardcoded on, and done so in such a way that the UI is different when there's a scrollbar. It's kind of jarring when using the interface, especially when trying to make tutorials or even just basic screenshots.

I'd love for it to go back to the way it was, but at the very least can it be made to not shift the entire UI? Screenshots below.

Kibana version:
I think that this problem was introduced in 7.15 or 7.16

Elasticsearch version:
Any

Server OS version:
Any

Browser version:
Chrome, safari, or Firefox

Browser OS version:
Windows or Mac

Original install method (e.g. download page, yum, from source, etc.):
Multiple methods

Describe the bug:
When the scrollbar is present the entire UI shifts

Steps to reproduce:
(note that these links are only accessible for elastic employees, instead see the screenshots below)

1. See that the dashboard from a 7.14 install exhibits the desired behavior
2. Compare it to this log stream page which has a scrollbar and this infra waffle map which shouldn't

Expected behavior:
The scrollbar should only show up when scrolling and not completely change the UI when it's present
Screenshots (if relevant):

This is what it looks like now - the whole banner shifts:

This is what it looked like in <= 7.14 - notice that, when scrolling, it's just a subtle overlay without impacting the entire layout

Errors in browser console (if relevant):

Provide logs and/or server output (if relevant):

Any additional context:

[alexfrancoeur]

@cchaos @clintandrewhall this seems to be a constant pain for marketing when it comes to recording and screenshots. Would the shared ux team own this type of issue? Or is it a level deeper like EUI?

[cchaos]

I'm pretty sure this is an operating system / browser option.

EUI (nor Kibana) does anything to change the default body scrollbar. EUI provides a mixin to style the smaller internal scrollbars you see on those panels but they don't hide/show.

[jamiesmith]

No, something definitely changed. The GIFs above were taken on the same computer, today

[jamiesmith]

Granted the change was months ago

[cchaos]

I think I'm tracking better what you're indicating, which is that Kibana is no longer respecting the Show scroll bars: When scrolling option. It's not that the scrollbars only show on scroll, causing the layout to shift, but that they only show up when scrolling is needed.

There was an EUI update almost a year ago that changed the color of the body scrollbars based on dark/light mode. elastic/eui#4969

The presence of these styles may indicate to the browser to not use the overlay style of scrollbar. Without doing any research into why this happens, I see 3 possible courses of action:

1. Nothing. Prefer matching color modes.
2. Find a way to only apply the custom scroll styles in dark mode (but this issue would still exist in dark mode)
3. Revert the style change, preferring this interaction, thus undoing the fix for dark mode.

But none of those options would still fix the issue for users (like me) who keep the system option Show scroll bars: Automatically / Always. This is just how browser's interpret when to show / not show scrollbars. The only other option would be to force them to always show on the body with overflow: scroll, but I don't think anyone wants that.

[jamiesmith]

Yeah, it was more than just a change in the color, it's the overall behavior. If you want me to show in more detail what I mean I'd be happy to jump on a zoom.

Your comment of "overlay" is exactly what seems to be missing

[clintandrewhall]

@cchaos can we pad the right-hand dynamically to prevent the content shift? I haven't played with this in a while, but I seem to recall being able to do that... we did it Canvas somehow, (@cqliu1, @crob611)

[cchaos]

You'll not want to add padding-right to the html or body element when scroll isn't available because it would make for an awkward blank space on the right hand side of all pages. If you do that, you might as well set scroll-y: scroll which shows the scrollbars always. This still isn't ideal as it still creates awkward empty space to the right of each page.

This honestly isn't an easy question to answer. Mainly because we're still talking about very specific OS settings and user preference vs how browser's inherently deal with overflow scrolling.

[petrklapka]

This behavior is currently by design, with no intention to change.