Miscalculates sizes and positions inside transform: scale

[andersk]

Current Behavior

If I add a SimpleBar to a element that’s inside an container with transform: scale(0.5), the scrollbars have a quarter of the length and half the range that they should.

For example, if the element is declared height: 800px and thus displays as 400px tall, SimpleBar displays a vertical scrollbar with length at most 100px that only moves within the top 200px of its 400px track. You also get a horizontal scrollbar even if no horizontal scrollbar is needed.

Expected behavior

In that example, the vertical scrollbar should be displayed with length up to 400px and move within its entire 400px track.

Reproducible example

Demo on JSFiddle.

Additional context

SimpleBar inside transform: scale may sound like a silly edge case, but I actually ran into this when trying to migrate Zulip from perfect-scrollbar to SimpleBar, because Zulip’s modal dialogs open with a CSS transition from transform: scale(0.5) to transform: scale(1), and the relevant lengths are only calculated at the start of this animation.

Your environment

Software	Version(s)
SimpleBar	3.1.3
Browser	Firefox 65, Chrome 73
npm/Yarn	N/A
Operating System	Ubuntu 19.04

[akagamina]

Hello,

I didnt understand exactly is that solution or question?

[kfei]

Same problem here. Can easily re-produce by putting SimpleBar onto an element with animation frame from transform: scale(0.5) to transform: scale(1).

@andersk Did you find out any solution on this?