Unexpected behavior with height transition on the handle

[matusbossak]

Describe the bug The bug only occurs when a height transition is applied to the handle element, as shown in the videos below. The handle functions properly when the height transition is not used. Other transitions, such as opacity or background-color, don't seem to trigger this bug.

E.g.:

.os-scrollbar-handle {
    transition: opacity 0.5s ease, background-color 0.5s, height 0.5s ease;
}

OverlayScrollbar code:

const { OverlayScrollbars, ClickScrollPlugin } = OverlayScrollbarsGlobal;
OverlayScrollbars.plugin(ClickScrollPlugin);
OverlayScrollbars(document.querySelector(element), {
  update: {
    elementEvents: [['*', "transitionstart transitionend"]],
  },
  overflow: {
    x: "hidden",
  },
  scrollbars: {
    autoHide: "leave",
    autoHideDelay: 1000,
    clickScroll: true,
  },
});

Element that is expanding in the videos below is using CSS grid-template-rows (value being changed: 0 -> 1 and vice-versa) transition.

Examples With the height transition: https://github.com/KingSora/OverlayScrollbars/assets/126194708/4e4243d1-b84b-42de-b24d-3849355771ba

Without the height transition: https://github.com/KingSora/OverlayScrollbars/assets/126194708/049b773f-86a9-4e04-88ad-42a190291557

Environment

• Used Operating System(s): Windows 10
• Used Browser(s) (with version): MS Edge (118.0.2088.69)

Thanks.

[KingSora]

Good day @matusbossak :)

That happens because the handle size calculation is sometimes dependent on the handle and track elements. Because of the transition the handle size is not instantly the correct value you also get an incorrect result for the calculated values.

I'll fix this behavior in the next release which should come soon

[matusbossak]

Hello,

thank you for your prompt response; it certainly makes perfect sense. I appreciate it! :)

[KingSora]

@matusbossak I'm having a bit of a problem here...

You see, its possible to set the min-height and max-height of the scrollbar handle via CSS and it will be respected when calculating the final values. This behavior is intended and will be supported going forward. The problem here is that this is the exact reason why I'm measuring the scrollbar handle and track.

So to be honest I'm not very sure about how to solve this case right now - Do you have any idea?

[matusbossak]

@matusbossak I'm having a bit of a problem here...

You see, its possible to set the min-height and max-height of the scrollbar handle via CSS and it will be respected when calculating the final values. This behavior is intended and will be supported going forward. The problem here is that this is the exact reason why I'm measuring the scrollbar handle and track.

So to be honest I'm not very sure about how to solve this case right now - Do you have any idea?

I sent you an e-mail.

[KingSora]

@matusbossak I've replied yesterday but I got an notification today that my answer mail couldn't be delivered to you because it was rejected by your email provider.

I've now replied again, but it will probably fail again..

[KingSora]

@matusbossak I believe I've found a suitable solution :)

It will be included in the next release

[KingSora]

@matusbossak I've released v2.4.5 which should fix this issue :)

[matusbossak]

I confirm that the behavior has been fixed! 👍🏻