Resizing scrollbars for zoom levels

edited December 2016 in Style Development Chrome
João. said:

...In yours, you'll see only my scrollbar style, because it's the only one published to us.o. ...

I also did a scrollbar style and there's a problem that always annoyed me: by zooming the page, the width of the bar also increases.
I've never found a way to solve this. Do you know any solution?
@João.

I started a new thread to avoid going off-topic in the other.

You could resize them using @media screen. You could certainly account for zoom levels for your own resolution. Global for all resolutions would be trickier, but it may be doable. I've never tried, so I couldn't say for sure.

For example, in my style scrollbars are 13px and my res is 1366x768. If I wanted to keep them slimmer with 125% zoom, I'd add something like this:
@media screen and (max-width:1240px){
::-webkit-scrollbar {
height:11px!important;
max-height:11px!important;
max-width:11px!important;
min-height:11px!important;
min-width:11px!important;
width:11px!important;
}

::-webkit-scrollbar-button:single-button {
height:11px!important;
max-height:11px!important;
max-width:11px!important;
min-height:11px!important;
min-width:11px!important;
width:11px!important;
}
}
There'll be other elements that should be resized in the screen, and you'd need to make different screens for different zoom levels. The "1240px" I used may be pretty random, you'd want to calculate them to be as accurate as possible. You can set a min and max for each. There's a couple examples at the bottom of the code in this style. Figure out the measurements yourself though.

Comments

  • edited December 2016 Firefox
    I've tried something similar, but it doesn't work well. As I told you before, I use Firefox and tried to use this code:
    @media (min-resolution: 1.09dppx) {
    scrollbar[orient="vertical"], scrollbar[orient="vertical"] thumb {min-width: 8.18px !important; max-width: 8.18px !important}
    }

    I did this for different zoom levels, calculating the width of the scrollbar as precisely as possible.
    But it isn't a perfect solution because, in addition to the browser zoom, many people use the Windows zoom. Notebooks are usually configured with a zoom of 125%.
    Anyway, it seems like there's not a really effective solution to this problem.
  • edited December 2016 Chrome
    I don't know what you're doing wrong, but it works fine in Firefox for me. I also don't understand how OS zoom is a factor. If your OS has a higher zoom, it affects everything evenly, so what does that have to do with the size of scrollbars?

    Disable yours and install mine:

    https://userstyles.org/styles/121381/basic-dark-gray-scrollbars-for-firefox

    Bump us.o to a 125% zoom. Scrollbar is wider. Edit my style and before the closing curly bracket, add:
    @media screen and (max-width:1240px){
    xul|scrollbar[orient="vertical"] {
    height:10px!important;
    max-height:10px!important;
    max-width:10px!important;
    min-height:10px!important;
    min-width:10px!important;
    width:10px!important;
    }

    xul|scrollbarbutton {
    height:10px!important;
    max-height:10px!important;
    max-width:10px!important;
    min-height:10px!important;
    min-width:10px!important;
    width:10px!important;
    }
    }
    Adjust the max-width according to what measurement should affect your res, save and reload (FF requires a reload) a page on us.o. Thin scrollbars. I don't see the issue.
  • Well, I did what you suggested and the scrollbar really gets thinner. Let's forget what I said about zooming Windows and talk only about the browser zoom.
    I wanted the width of the scrollbar (visible width, not number of pixels) to be the same, regardless of the zoom level applied. It would have to be "immune" to the zoom, like the original scrollbar.
    I don't know how to solve this. I don't think it's possible.
  • edited December 2016 Chrome
    João. said:

    Let's forget what I said about zooming Windows and talk only about the browser zoom.

    Because it's stupid?
    João. said:

    I've tried something similar, but it doesn't work well.

    It works fine. You're doing it wrong. Try this...

    João. said:

    Well, I did what you suggested and the scrollbar really gets thinner.

    This was the objective. Surely this statement will be followed by an explanation of what you were previously doing wrong, and a simple "thanks" for explaining it twice.
    João. said:

    What I really wanted was unrealistic...I don't think it's possible.

    When a zoom is applied, browsers treat scrollbars like part of the page. Zoom makes pixels larger. If you want something with larger pixels to remain the same size, use less pixels. This isn't rocket science.
  • João. said:

    Let's forget what I said about zooming Windows and talk only about the browser zoom.

    Because it's stupid?
    João. said:

    I've tried something similar, but it doesn't work well.

    It works fine. You're doing it wrong. Try this...

    João. said:

    Well, I did what you suggested and the scrollbar really gets thinner.

    This was the objective. Surely this statement will be followed by an explanation of what you were previously doing wrong, and a simple "thanks" for explaining it twice.
    João. said:

    What I really wanted was unrealistic...I don't think it's possible.

    When a zoom is applied, browsers treat scrollbars like part of the page. Zoom makes pixels larger. If you want something with larger pixels to remain the same size, use less pixels. This isn't rocket science.
    There's nothing stupid, I just thought that zooming Windows was not so important because, as you said, it affects the entire screen evenly.
    Your solution is good and very similar to mine.
    When I said it didn't work well, I meant it was not exactly what I was looking for. But I understand that it's the only possible solution.
    So thank you for your attention and for your patience. Your code certainly taught me a little more.
    I still have some difficulty expressing myself in English, so I apologize if I seemed unkind.
  • No big deal. "Thanks" goes a long way in any language.

    I get frustrated when I make an effort to give a detailed explanation of the best decent solution (afaik), and someone seems disappointed and dismissive because the answer is not a magic bullet.

    It isn't simple or perfect, but if you're determined, they could be made to be virtually indistinguishable.
  • Your explanation is very helpful to me. I'm not disappointed. I'm going to work on this code to perfect it as much as possible.
    Your idea really is very much like the one I was developing. Although not a "magic bullet", it seems to be the only solution. Once again, thanks.
    But there's a question that you can maybe answer me: when there's no scrollbar style installed, the width of the bar doesn't change with zooming. But by using any scrollbar style, the bar is zoomed in just like any other page element.
    Why does it happen?
  • edited December 2016 Chrome
    It's been so long since I actually used default scrollbars that I didn't even know they didn't change. I've either used an extension or style to change them for as long as I can remember. I made scrollbars for either browser about a year ago and the wider scrollbars with zoom bugged me as well. I figured out the media screen method at the time, but have since gotten away from using zoom as much.

    I remember looking for the default scrollbar CSS Chrome uses at the time, but I don't think I found it, so I can't say for sure what they do differently. The simple fact that default scrollbars aren't affected got me thinking that there must be a better solution. I may have figured out a somewhat magic bullet, possibly what they use. I've only just tested it briefly, and I'm not positive how it scales on different resolutions, but maybe you can test it and let me know.

    http://pastebin.com/9ne9T4su

    It uses a measurement unit that is constant regardless of zoom. It's one I wasn't all that familiar with a year ago, but it probably should have occurred to me now, that it may be useful for this.

    Edit: Applied the same method to scrollbar arrows and updated the Pastebin link.

    Edit 2: Fixed horizontal scrollbar arrow sizing and updated the Pastebin link.
  • I'll test it and then I'll get back to the subject here.
    Thanks.
  • edited December 2016 Firefox
    I tested your code and used this unit of measurement (vw) in my style and I could see that it really works. The scrollbar is "immune" to the zoom of the page.
    The solution is perfect for my personal use, but I still don't know if I'll use it in my published style, because the width of the scrollbar depends on the size of the window. If the window is not maximized or the monitor is small, the bar becomes thinner. If the monitor is too large, the bar becomes wider.
    For example: I use the Stylish editor in a small separate window, not a tab. Then I could see that the scrollbar is much thinner in the editor than in the main browser window.
    But for me it's a big step forward and I thank you for the help. I'll keep working on it, but I think we're on the right track.
    Thank you very much.
  • edited December 2016 Chrome
    Yeah, I kinda figured there'd still be a lot of variables to account for. As a personal style, I really like it. For a published style intended to work globally, it's probably better off being off by a couple pixels here and there in relation to zoom.

    I also barely ever undock the browser, so that isn't a big factor for me. If you use it personally, you could use vmin or vh which are typically the same on pc/laptop screens. If height remains constant in your positioning habits, it might be better to base it off that.

    I've never been that adventurous with the more obscure measurement units, so it's possible there's a better one. Afiak, the viewport units are the only ones that'd be "immune" to zoom, but maybe not.

    Combining viewport units with media screens might be the best global solution.

    An important factor that shouldn't be overlooked, is demand vs the amount of work you're putting in. I jumped in on this topic because it's something that also kinda bugged me, but I would guess we're probably in the minority. Making it work in a personal style is cool. I'm not so sure that a global solution is in heavy demand.

    Most people probably either wouldn't notice, or wouldn't care. I'm sure there's even some who prefer the scrollbars to scale a bit with their zoom preferences.
  • You said something important: who cares? Maybe no one. My published style has an average of 10 to 15 new users per week.
    What drives me to try to find a solution is simply the challenge of trying to solve a seemingly unsolvable problem. I wanted to understand how browsers treat the scrollbar and why it is invariable with zoom, but that is far beyond my knowledge.
    But if I ever figure out a solution that can be published, you'll be the first to know.
  • edited August 5 Chrome
    @João.

    I think I finally found a solution for this. Only took 7 months. Came across it while trying to solve a different problem. A screen I was unfamiliar with till yesterday seems to do the trick. I just redid my Chrome scrollbars to incorporate it, so you'll have to check it out in Chrome. The screen does also work in FF, so theoretically, it shouldn't be an issue.

    I was using small, centered arrow images for scrollbar buttons, so I switched them. If you aren't already, I recommend using images that fit the entire default button size, so you can use: background-size: cover; and not have to worry about resizing them.

    The screens are clearly labeled at the bottom of the code, and should be fairly simple to understand. Let me know how it goes. =)

    https://userstyles.org/styles/121380/zz-basic-dark-gray-scrollbars-for-chrome
  • Thank you for remembering this subject. I also looked for a solution during this time.
    I tested your code in Chrome and it works fine. You had the great idea to change the dimensions of the scrollbar depending on the zoom levels. The scrollbar is not immune to zooming but adapts to it. This is a good global solution.
    For my personal use, I have already solved the problem using the unit of measure "vw", but I have not changed the published style because there are notebooks with small screens.
    My style has no buttons and the scrollbar "floats" over the page, without taking up space.
    As I think my style will not work on FF 57, which will be released in November, I'll wait until then, because I'll probably have to redo the whole code. In this case, your help will be very important, because so far I have only developed styles for browsers based on XUL. I'm not sure how to do this in browsers like Chrome.
    And I also think Stylish will not work on FF 57.
    Thank you very much.
  • edited August 6 Chrome
    Sure thing. I was also using the vw trick we discussed here previously, in my personal style. If you've been using it, I'm sure you're aware that it has a bunch of faults though, which are kinda annoying. Obviously they only work for particular screen resolutions, and even then, only if the browser is docked in full-screen. That said, to me, the worst bug is with iframes. Really thin iframes with scrollbars can have scrollbars so thin, they're unusable. You could never publish it like that. I was glad to find a new trick, which has no drawbacks really, and is fairly simple to implement.

    I guess this screen is mostly used for mobile, to change CSS based on devices detected, but it works great for what we were trying to accomplish here. It checks dppx, or "dots per pixel", which is exactly what zoom affects.

    I'll probably redo my FF scrollbars sometime soon, just out of curiosity, to see if it works as expected. Only reason I haven't already is because I'll have to switch all the scrollbar button code for them as well, which is a PITA. The resizing code is actually the simple part. If and when I do, I'll let you know how it goes. I'm not sure if even Mozilla knows what they're gonna do about scrollbar and other UI styling. AFAIK though, most of it (including scrollbars) should continue to work with a userchrome.css file. Don't know much about FF, but I've read that there's no plan to drop support for that in 57+.
  • Yes, you're right. The unit "vw" has many problems, so I did not publish.
    Your solution is excellent. If Stylish continues working on FF 57+, I'll try to use this solution in my Firefox style. Unfortunately, the userChrome.css file is impractical because you have to merge all styles into a single file and the changes are only visible after restarting the browser. I still hope that stylish developers will release a new version to work on Firefox, but both the extension and the userstyles site look totally abandoned.
    This change from Mozilla to Firefox is revolting all developers and fans of the browser. We're looking for forks that remain fully customizable, like FF currently. If we wanted a browser like Chrome, we'd have been using it for a long time.
    I'll wait for the events, but let's talk about it again because you always have a lot to teach me.
    Once again, thank you.
Sign In or Register to comment.