Simplebar: Native Scrollbar Shown When Zoomed In

[audinue]

When you zoom in the native scrollbar shown.

[Grsmto]

In which browser? I can't reproduce this issue.

[audinue]

Sorry, it is zoomed out not zoomed in. Both Firefox and Google Chrome.

Here is the screenshots.

Before:

After Zoomed Out:

Thanks for responding.

[bobbiejwilson]

I'm getting this on FF without being "zoomed in". Default view.

[Grsmto]

@bobbiejwilson what version of FF/platform/Simplebar?
Thanks

[bobbiejwilson]

FF/Win10/Simplebar2

I was using min-width, works fine in chrome, not in FF. Switched to width and it seems to work on every other refresh.

[byman64]

same here,
Chrome show 1 or 2 pixel of the original scrollbar. Zoom In/Out disapper or appear more
Edge works fine
http://www.quakearea.com/q3statusbot/gameq/index_simplebar.php
I will keep that link for a while and than I will remove.
Let me know
thx

[jamesrpublications]

Does anyone know how to fix this?

[batsuuri]

Only FF shows native scrollbar and simplebar shows both. I made change css and looks different from default view.

[batsuuri]

Figured it out reading from https://github.com/Grsmto/simplebar/issues/142. It caused set custom class that div controlled by simplebar.

[MattCCC]

I think that the padding/margin should be recalculated inside of window "resize" event. It is because the native scrollbar in FF (not sure about other browsers) changes it's width. So padding set by scrollbar element becomes not actual. The best would be to use fixed percentage padding and percentage width. Hope that helps.

[Grsmto]

@MattCz the problem is that the browser zoom is doing a "out of browser context" zoom. Which means that the app code can't have any clue of the current zoom and the actual impact on the layout.
It does trigger a resize event but the calculation here will output exactly the same values as before you zoomed in/out. So the problem happens.

I think only solution is to hack around window.devicePixelRatio and browser specific code.
The core idea of this plugin is around a hack anyway so it may be possible.
This issue is now my highest priority as this is really breaking and it might not be worth keep working on the plugin if we don't find a solution for such a major issue!

Edit: actually after further tests, it seems like Chrome now sends the right sizes after zoom! So it may be possible to fix this finally! I'll test soon in other browsers.

[KingSora]

@Grsmto Since I've developed my own scrollbar plugin, I've faced the same issue. Indeed this issue isn't simple to fix and it required me a lot of research and experiments to fix it, but in the end I've found a solution.

Let me explain how I fixed it and what my approach was:

• What causes this bug? - This bug is caused because the browser won't change the size of the scrollbars if you zoom. Lets take a example you have zoomed to 1 (100%), in this mode your page has a pixel ratio of 1:1. If you measure now the scrollbar size (which is necessary to make your plugin work) this size is correct for this zoom. Lets assume the scrollbars have a size of 17px. Now you zoom out to 0.5 (50%), the browser is changing the pixels of your webpage to this zoom (so a div which had 200px height appears now as it would have 100px height). But altough everything is now half as big as it was, visually the scrollbar still takes the same amount of space as it took as the zoom was at 1 (100%). So the visual size of the scrollbar is always absolute. Lets measure the "logic" size of the scrollbar again now with this zoom of 0.5 (50%). The size which now is computed should be something around 34px, because everything is half as big visually, but the scrollbar isn't.

• How can I fix this bug? - Now that we know how this bug is exactly caused and all its characteristics, we are able to write a fix for it. The hardest part is to detect the zoom event. As you mentioned the zoom can be catched with the resize event, but inside you should do some customizations because a resize event is also fired after resizing the window. In this customized resize event you have to tell your plugin instances to update their value of the scrollbar size. This would be the whole fix.

The bug is also caused only in browsers in which the scrollbarsize is visually absolute, such as firefox. The internet explorer for example scales its scrollbars with the zoom, so this bug isn't present there.

If you need more help, you can take a look at the code of my scrollbar plugin here, or you can ask me directly.

I hope I could help you a bit!

[Grsmto]

I don't know if browser behaviour changed but I remember trying to fix this in 2015 when this issue was raised and figured out it was impossible due to the fact that there was no way to measure the scrollbar width properly after zoom in/out on Chrome.

But I recently took a look again and now it works just fine! I have implemented a solution already on the next branch and I'm preparing a new release of the plugin for very soon.

Thanks @KingSora for your input, I checked your plugin already and I was impressed by the amount of work that has been done there! Especially the demo website, good job!

[yaymukund]

@Grsmto That's great news! From testing the next branch, it seems to fix this exact issue on my end.

Do you have an ETA for the new release? Excited to use it in production.

Thank you for your work on this module 😄

[Grsmto]

@yaymukund yes I'm actively working on it and I hope to have a beta in a couple of days.
Thanks for the feedback! Right now I'm working on automated tests to make sure it's stable and can be used safely in production for current users.

[Grsmto]

Closed in [email protected].