4

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;
}
Binyamin
  • 7,493
  • 10
  • 60
  • 82

3 Answers3

3

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.

John K
  • 28,441
  • 31
  • 139
  • 229
  • So is there some CSS or JS issue for later Chrome versions? – Binyamin Dec 31 '10 at 10:45
  • I added an update to the bottom of my answer based on the fact it doesn't work in my latest version of Chrome in an iFrame, and apparently it hasn't since v6, although v5 did implement it. – John K Jan 01 '11 at 01:29
2

It seems be working on Chrome 14.

Binyamin
  • 7,493
  • 10
  • 60
  • 82
0

Works for me. Perhaps check your version of Chrome? (Im using 8.0.552.231)

Ben Keating
  • 8,206
  • 9
  • 37
  • 37