overflow: hidden; doesn't work on Chrome with IFRAMEs?

I have an IFRAME with overflows hidden in the css and html. It works in Firefox, but not Chrome/Safari

Why is this?

Solution 1:

Right, how about:

<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>

as in the scrolling="no"

http://jsfiddle.net/neSBS/

Solution 2:

After a pretty big research I've done on this subject I would like to post my answer, which I suggest, could be an addition to Joonas's answer:

<style>
    iframe {
        overflow:hidden;
    }
</style>
(...)
<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>

I think, both scrolling and overflow:hidden should be provided, although this solution won't work in a combination of Chrome and HTML5 doctype. scrolling attribute is deprecated in HTML5 and the overflow property doesn't affect iframes in Chrome. I assume, the latter is a bug, since the HTML5 specification says clearly:

In addition, HTML5 has none of the presentational attributes that were in HTML4 as their functions are better handled by CSS:
(...)
- nowrap attribute on td and th.
- rules attribute on table.
- scrolling attribute on iframe.
- size attribute on hr.
- type attribute on li, and ul.
(...)

It's said clearly - in HTML5 scrolling should be replaced by CSS overflow.

Solution 3:

<style>
    iframe::-webkit-scrollbar {  
    display: none;
}  
</style>

As found on - Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar