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

Question

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

Why is this?

Answer 1

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.

Answer 2

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

Answer 3

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

I had this problem in Chrome but not in Firefox.

Answer 4

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

Answer 5

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/

Answer 6

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

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