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?

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/

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.

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

As found on - https://stackoverflow.com/questions/1691873/safari-chrome-webkit-cannot-hide-iframe-vertical-scrollbar

Strange but - transform: rotate(0.00001deg); for div with overflow:hidden; helps for me.

Just width: 99.99%; did the trick for me.

I had this problem in Chrome but not in Firefox.

Use overflow-y:hidden; then the vertical scroll will be hidden.