Passenger showcase scrollbar messes up row layout of website

[dipamsen]

Example: https://thecodingtrain.com/challenges/30-phyllotaxis

Because of the scrollbar in the showcase section (which adds a bit of width), the horizontal rows are no longer in sync causing a staggering between the foreground and background.

[shiffman]

I'm not sure I completely understand this issue, can you elaborate? What browser/OS are you on?

[Nishaaaanth]

I guess he's talking about the light pink colored horizontal lines in the background layer of the site, which in the image doesn't coincide with the foreground grids.

[Nishaaaanth]

The same can be seen happening in the "Topics" and "Languages" block at the top of a video. Here, the line is even though present in the background is actually cutting the Words.

[dipamsen]

@shiffman
Maybe a side by side comparison is helpful? (Look at the background pink horizontal lines)

System:
Windows 11; Google Chrome 110.0.5481.178 (Official Build) (64-bit)

[shiffman]

Ah, ok! I see it now! On Mac OS chrome the issue is not present (at least I'm not seeing it?) so I wasn't able to notice it easily. Definitely something to fix!

[fturmel]

I can see it on macOS in all browsers, but not when you're in the dev devices/responsive mode (on mobile these scrollbars are usually hidden and appear on top of content instead of adding a gutter). That's probably why this glitch slipped during development, sneaky.

Desktop

Devices/responsive

[dipamsen]

While playing with this I found the unofficial CSS overflow: overlay property which is supported by chrome, and does exactly what we want (The scrollbar is overlayed on top of content):

overflow: auto

overflow: overlay

• overflow: overlay Browser Support

[shiffman]

Great! Happy for you to add this as a pull request @dipamsen if you think it makes sense!

[dipamsen]

Great! Happy for you to add this as a pull request @dipamsen if you think it makes sense!

I am not sure if its a good idea because it is an unofficial property (not documented in MDN Web Docs) and only supported in a few browsers...

[shiffman]

Got it, we can leave this open and see if it is more widely supported in the future!

[SilvestriStefano]

Hello,
I just wanted to give an update.

The overlay value of the overflow CSS property is legacy and it is functionally equal to auto, according to MDN (it is a Note in the Values section).

There is another property that was made to deal with scrollbar issues: scrollbar-gutter. It has good support MDN CanIUse.com. However, there is again the same problem with using this property as it reserves space for the scrollbar.
Bramus and CSS-Tricks have good articles about it even though the last update was on 2021.

Another possible solution would be to hide the scrollbar completely on all browsers.

[shiffman]

Checking in on this issue, @dipamsen is this layout bug still showing up for you, shall we try doing anything with scrollbar-gutter as suggested by @SilvestriStefano, is overflow: overlay more widely supported now?