Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why Chrome does not show CSS ::-webkit-scrollbar scrollbar for iframe?

Why Chrome does not show CSS ::-webkit-scrollbar scrollbar for iframe?

Demo http://jsfiddle.net/laukstein/C9s3P/

<iframe scrolling="yes" style="overflow-x:hidden; overflow-y:scroll; width:150px; height:50px;" src="http://en.wikipedia.org/wiki/Web_browser"></iframe>

CSS

::-webkit-scrollbar{
    width:0.8em;
    height:0.8em;
    background-color:#fff;
}
::-webkit-scrollbar:hover{
    background-color:#eee;
}
::-webkit-resizer{
    -webkit-border-radius:4px;
    background-color:#666;
}
::-webkit-scrollbar-thumb{
    min-height:0.8em;
    min-width:0.8em;
    -webkit-border-radius:4px;
    background-color: #ddd;
}
::-webkit-scrollbar-thumb:hover{
    background-color: #bbb;
}
::-webkit-scrollbar-thumb:active{
    background-color:#888;
}
like image 752
Binyamin Avatar asked Aug 31 '25 17:08

Binyamin


2 Answers

Apparently according to results from http://browsershots.org the CSS implementation differs between Chrome versions 5 & 6+. When your test screen is viewed it appears as follows...

Changes in Behaviour

Just some general info about changes in the behaviour of stylable scroll bars.

Chrome 5.0.x - iFrame shows with scrollbars

alt text

Chrome 6.0.x+ - shows without scrollbars

alt text

(entire set of test results @ http://browsershots.org/http://jsfiddle.net/laukstein/C9s3P/embedded/result/)

Update

Apparently the official Styling Scrollbars page doesn't say it works with iFrames, although at one point (Chrome 5) it did as seen above. The behaviour is different since 6.

Posted by Dave Hyatt on Thursday, March 19th, 2009 at 2:19 pm
WebKit now supports styling of the scrollbars in overflow sections, listboxes, dropdown menus and textareas. For those who want to skip the article and just go right to the source, here is an example [...]

A comment on that same page says:

Too bad it can’t style windows scrollbars.

An iFrame normally uses Windows scrollbars.

One possibility is Chrome's implementation of iFrames or scrollbars changed between v5 to v6 from either a non-standard scrollbar to a pure Windows scrollbar, or from a "faked" div iFrame under the hood (or something similar) to a true Window for the iFrame, as the browser has evolved on the Windows platform.

like image 142
John K Avatar answered Sep 02 '25 05:09

John K


It seems be working on Chrome 14.

like image 23
Binyamin Avatar answered Sep 02 '25 07:09

Binyamin