I ran into a following issue. I have a popup dialog with a scrollbar. In Google Chrome it has space reserved for a scrollbar. However, Firefox does not reserve any space for a scrollbar, so when it appears, it can overlap content (see screenshots). Probably it is somehow related with the fact, that firefox hides scrollbar unless you hover scrollable area. Could you suggest any solution to make firefox reserve space for scrollbar the same way as Chrome do?
Asked
Active
Viewed 313 times
1 Answers
0
Really great question! Unfortunately, As far as I'm aware, there is no simple solution to this problem. I would recommend creating a design that looks good with or without the space differences that the scrollbar creates.
But if you are dead-set on creating a more versatile solution, you could change the scrollbar using Javascript/Jquery (See this answer:Custom CSS Scrollbar for Firefox), or you could try and detect the browser, and accommodate extra padding for elements with scrollbars for users using Firefox(See this answer: How to detect Safari, Chrome, IE, Firefox and Opera browsers?)
Sam Sabin
- 553
- 1
- 6
- 19
-
1Thank you for the answer. Eventually, I solved the problem adding padding for FF via CSS – Nikita Sviridov Oct 18 '22 at 12:22
-
@NikitaSviridov You’re welcome! Glad that worked for you – Sam Sabin Oct 19 '22 at 20:13