TASK: Prevent the hover scrollbar from squashing content

[albe]

Related to #8 and one attempt at actually fixing the issue shown there. However, this leads to some labels/icons possibly being cut, which is also not optimal (but still better than the content jumping).

[albe]

That's how the nav looks with the overflow-y: overlay solution. Notice the search icon being cut off a bit. This can again be solved for this single place easily, but shows the general drawback of this method.

[albe]

On further investigation, overflow: overlay seems to not be an official standard (and only supported in chrome and safari): w3c/csswg-drafts#92

instead the official solution is supposed to be scrollbar-gutter (w3c/csswg-drafts#92 (comment)), which is still in draft stage and not supported by browsers yet.

[rolandschuetz]

@albe Do we still need this, when #8 is merged?

[albe]

Yes, as #8 is just a small workaround, that only reduced the number of cases where the jumping happened, by reducing the bottom margin and hence giving a bit more room.

However there is still no official standard that creates the wanted scrollbar behaviour, as long as scrollbar-gutter is not finalized (and supported in browsers), which might still be a long time (https://css-tricks.com/almanac/properties/s/scrollbar-gutter/).

I'd go with the fix as is with my latest commits, which do the following:

• in Chrome, the overlay behaviour is applied
• in IE/Edge, the -ms-overflow-style will be applied together with overflow: auto, causing the scrollbar to hide automatically and overlay the content, preventing the bug
• in Firefox, overflow: auto is applied normally, but for some reason the bug is not happening there anyway