perfect-scrollbar Wrong scrollbar size under 'transform: scale'

Make sure these boxes are checked before submitting your issue -- thank you!

[x] Check FAQ and Caveats
[x] Search if there's already one reported in Issues
[ ] Prepare a JSFiddle reproducing the issue
- perfect-scrollbar JSFiddle
[ ] Provide a page or source code where the issue can be checked

Hi, there I want to report a problem and my simple solution to it.

What is it?

Suppose we have the following DOM structure:

<body>
    <Container>
        <Scrollbar>
            <ChildContent>xxx</ChildContent>
        </Scrollbar>
    <Container>
</body>

If <body> (or any ancestor node of <Container>) contains transform: scale(x, y) where x and y are not 1, the width and height of scrollbar is wrong, and its scroll position is also affected.

Where is the problem?

I found some codes in update-geometry.js here

const rect = element.getBoundingClientRect();

i.containerWidth = Math.ceil(rect.width);
i.containerHeight = Math.ceil(rect.height);

The function getBoundingClientRect() returns infomation AFTER transforming. For example, let's say we are using scale(0.5, 0.5). So when I set width: 100px to <Container>, rect.width will be 50 after getBoundingClientRect() has been called, but 100 is the correct answer here.

How to solve it?

I found rect here is only for getting width and height of <Container>. So why not just use element.clientWidth instead? This will not be affected by scale.

Why there is not any PullRequest or a jsfiddle

I don't think I am the first one thinking using clientWidth instead of getBoundingClientRect(). Maybe you have some reasons, what is I want to know.

About jsfiddle, well, it's just because I cannot access to it in my contury, for some reason, you know. But I have described my reproduce procedure as clear as possible. Hope you can understand what I mean.

Thanks team! Great work for this project! I love it very much!