iframe scrollbar disappears in Chrome on a Mac

Question

I have a full page iframe, but in chrome the scroll bar initially loads then disappears, the room is there for it, and you can use it but it's not visible. Works perfect in safari and firefox and chrome on pc, however on a mac you see the well of the scroll bar, but the bar itself is missing.

body,html{
    height:100%;
    overflow:hidden;
}
#me-branding-bar{
    overflow:hidden;
    width:100%;
    height:40px;
    position:relative;
    background-color:#ff9900;
}
#me-content{
    height:100%;
    width:100%;
    position:relative;
    border:1px solid #ff9900;
}
#me-content iframe{
    border:1px solid #000;
    overflow:scroll;
}

<div id="me-branding-bar">

</div>

<div id="me-content">
    <iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="<?php echo $url;?>" style="overflow:visible;height:100%;width:100%;" height="100%" width="100%"></iframe>
</div>

http://jsfiddle.net/RYwty/

Answer 1

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.

Answer 2

The code below seems to solve the iframe scrollbar problem in Chrome on a Mac.

This fix is cross-browser compatible with Firefox, Safari, and Opera on Mac and PC.

jsfiddle

HTML:

<div id="me-branding-bar"></div>

    <div id="me-content">
        <iframe src="http://tsn.ca" height="100%" width="100%" class="iframeclass"></iframe>
    </div>

CSS:

body,html{height:100%;overflow:hidden;}
        #me-branding-bar{overflow:hidden;z-index:102;width:100%;height:40px;position:relative;background-color:#ff9900;}
        #me-content{height:100%;width:100%;position:relative;border:1px solid #ff9900;}
        #me-content iframe{border:1px solid #000;}

.iframeclass::-webkit-scrollbar {
    width:10px;
}

.iframeclass::-webkit-scrollbar-track {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.02);
}

.iframeclass::-webkit-scrollbar-thumb {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.3);
}

.iframeclass::-webkit-scrollbar-thumb:hover {
    background:rgba(0,0,0,0.3);
}

.iframeclass::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(0,0,0,0.3);
}