Macos Chrome Horizontal Scrollbar Not Disappearing

MacOS Chrome horizontal scrollbar not disappearing

This is Chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=914844#c36

Many people are adding white space of scrollbar size (25px) to prevent scrollbar from obscuring content.
It is workaround and can be considered only as a temporary solution though.

chrome macOS horizontal scrollbar stays hidden no matter what (despite overflow:scroll)

So scrollbars are an OS and and application level setting depending on what you're using.

On mac I think you can turn them on and off for system screens, on chrome you used to be able to turn them on and off, but when I just went looking for the setting I couldn't find it in the latest version of chrome.

Unfortunately, beyond adding overflow: scroll to a div you have no other control over whether or not a scroll bar appears, and even if you get it to appear for yourself, there's zero guarantee that it will appear for your users.

You can check out this video of a guy changing his own Chrome settings (https://www.youtube.com/watch?v=VTLHxboMivM) but like I say, I just had a look in the current version and couldn't see it.

Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink

The appearance of the scroll bars can be controlled with WebKit's -webkit-scrollbar pseudo-elements ^[blog]. You can disable the default appearance and behaviour by setting -webkit-appearance ^[docs] to none.

Because you're removing the default style, you'll also need to specify the style yourself or the scroll bar will never show up. The following CSS recreates the appearance of the hiding scroll bars:

Example (jsfiddle)

CSS

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
} 

WebKit (Chrome) Screenshot

iframe scrollbar disappears in Chrome on a Mac

Why does the scrollbar disappear in an <iframe> when using Chrome on a Mac?

That's a pretty broad question when your <iframe> contains an entire page from an external site. Let's break it down into a few steps.

^{The following examples assumes that you use Chrome on a Mac.}

Make a simple test

Create a very simple HTML page, put it in an <iframe>, and view it in Chrome on a Mac (DEMO).

The scrollbar does not disappear. Everything seems fine. So it's most likely something on the external site is causing the problem.

Debug the external site

The symptom is that the scrollbar actually appears for a very short time before it disappears, but the page is still scrollable. Maybe JavaScript is causing the problem? Let's disable JavaScript and try it out.

It turns out the scrollbar does not disappear when JavaScript is disabled. So something loaded by JavaScript is causing the problem. Further debugging reveals that a flash object is the culprit.

Make another test

Create two simple HTML test pages and add a flash object to one of them. Put them into different <iframe>s and compare them to see the difference.

<object type="application/x-shockwave-flash"></object>

It turns out the one with a flash object does not have a visible scrollbar.

Conclusion

The scrollbar does not disappear in a normal <iframe>, but the ones with a flash object. It may be a bug, or it may be an intentional dirty hack. Many flash ads and videos are served in <iframe>s and having a scrollbar in them isn't pretty.

But the point is, you are serving external contents in your <iframe> and these are things that you have no control of.

<iframe src="<?php echo $url;?>"></iframe>

Maybe you can try your best to solve an issue or two, but there are dozens of things happening in an external page that can break things here and there. People can even prevent their sites from being placed in an <iframe> with a little help from JavaScript and HTTP headers. As long as the page loads, you should be happy about it. Don't bother too much about minor details like the disappearing scrollbar. Only worry about it when the page isn't actually scrollable. You are talking a scrolling on a Mac. Most of the time this is done by gestures, not scrollbars.

If you do want more control of the external contents, consider loading it on server side with cURL and modifying the contents with HTML parsers.

Chrome scrollbar disappears (not overflow-y)

1) Why scrollbars are different on the same OS and browser version, but different machines ?

This probably has to do with the system settings on macOS.

If you have Always selected, I'm pretty sure that the scrollbar pushes the page content out of the way. Same with if you have a mouse connected. Otherwise, it has the "absolutely positioned" behavior you mentioned. Keep in mind that Windows users will probably see behavior similar to Always.

2) Is there any way to fix this without any plugins ? Taking into consideration Windows users have the case 2 and MacOS users either case 1 or 2 ?

Well, a bit of opinion first: I don't think it's a good idea to hide the scrollbar without providing another cue to the user communicating the scrollability of the element. Anyway, with that out of the way, I can't think of anything that's not some kind of hack but here goes:

Since this is something that only needs to execute once, and assuming that we want predictable functionality across browsers and OS, you can use some JS here. On systems which persist the sidebar the offsetWidth and scrollWidth properties of the sidebar element will be different. By default, your element could have the follow styles:

$child-h-padding: 15px;$max-scrollbar-width: 35px;
.r-sidebar {  overflow-y: scroll;  padding: 12px $child-h-padding;  ...rest}
.r-sidebar--r-padded {  padding-right: $child-h-padding + $max-scrollbar-width;  right: -$max-scrollbar-width;}

Firefox: pass event from anonymous javascript function

Yes, there is an event object as arguments.

You can get it by

var e=arguments[0] || event; // Firefox via the argument, but IE don't

I don't know if they exact the same, but I read <xxx onkeydown="func(event);"> as xxx.ononkeydown=function(event){func(event);};

Reference event @ Mozilla.org

---

Related Topics