mdbootstrap
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
- [ ] 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!
