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?

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

Solution 4

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

View more solutions

Comments

[dukevin]

that did it, thanks! And there's a reason why you haven't used iframes in a while... (they are a pain to work with)

[dukevin]

This did not work in Google Chrome for IFRAMES, Lollero's answer did work

[matewka]

scrolling attribute is deprecated in HTML5 and it simply doesn't work there.

[Joonas]

@matewka stackoverflow.com/questions/4804604/…

[matewka]

@Joonas yes, I know that. But seamless attribute doesn't hide scrollbars if the content document doesn't fit in the iframe. At this time there is no way to manage scrollbars in iframe when it comes to the latest Chrome browser and a HTML5 document. The scrolling attribute doesn't work, CSS overflow neither. The latter is probably a browser bug.

[Joonas]

@matewka what about the answer in that question, that has most up votes? From what I've heard, the recommendation is to use combination pretty much every known way to hide the scrollbar ( valid code or not ). But also, AFAIK, there is no 100% working solution. Maybe you could use something like ajax instead of bringing content in with iframe?

[matewka]

I agree, I don't deny your answer. I just wanted to add a thought that this solution is not complete. I'll post my own answer, just to show my point of view.

[Soullivaneuh]

And how about hidden horizontal scroll only ?

[Tormy Van Cool]

"seamless" is not supported by any browser in this moment (perhaps they should rename it "useless" :-) ) "scrolling=no" is not HTML5, but even if you have HTML5 pages, it's better to use it, 'cause some browsers like Chrome, still do not recognize "overflow: hidden;", even now, almost 6 years after this topic.

[Henrik Christensen]

Worked for me as well. Also, transform: translateZ(1px) did the same thing.

[Konrad Gałęzowski]

Unfortunatelly it not always does the trick. Sometimes it's 98%, sometimes 95% which makes it very fragile solution.