55

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

Why is this?

dukevin
  • 22,384
  • 36
  • 82
  • 111

6 Answers6

91

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/

Nimantha
  • 6,405
  • 6
  • 28
  • 69
Joonas
  • 7,227
  • 9
  • 40
  • 65
  • 1
    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 Sep 13 '11 at 07:32
  • 7
    `scrolling` attribute is deprecated in HTML5 and it simply doesn't work there. – matewka Jan 09 '13 at 12:06
  • @matewka http://stackoverflow.com/questions/4804604/html5-iframe-seamless-attribute – Joonas Jan 09 '13 at 12:41
  • 1
    @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. – matewka Jan 10 '13 at 10:40
  • @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? – Joonas Jan 10 '13 at 11:48
  • 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. – matewka Jan 11 '13 at 12:26
  • And how about hidden horizontal scroll only ? – Soullivaneuh Apr 16 '15 at 21:36
  • "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. – Tormy Van Cool Sep 13 '15 at 08:57
15

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.

matewka
  • 9,912
  • 2
  • 32
  • 43
3
<style>
    iframe::-webkit-scrollbar {  
    display: none;
}  
</style>

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

Ian Everall
  • 41
  • 4
3

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

be3
  • 79
  • 1
  • 5
0

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

I had this problem in Chrome but not in Firefox.

philard
  • 132
  • 2
  • 5
-1

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

mohana rao
  • 433
  • 3
  • 13