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

Question

I have an iframe on www.example.com that points to support.example.com (which is a CNAME to a foreign domain).

I automatically resize the height of my i

Answer 1

I just solved it on my blog with scrolling="no" after the style tag.

eg:

iframe src="asdf.html" style="overflow: hidden;" scrolling="no"

I left the style attribute in there because it's more proper and it worked fine on Firefox.

Answer 2

Can you set the overflow-y CSS property for the IFRAME to either visible or hidden?

Answer 3

Note: this is useful if you cannot edit the CSS / HTML of the iFramed content.

It's a bit of a hack, but I solved this issue by wrapping the <iframe> in a <div>, setting the <div>'s height, width & overflow:hidden, then setting the <iframe>'s width & height to actually overflow the wrapping <div>.

<style>
  div {height:100px;width:100px;overflow:hidden}
  iframe {height:150px;width:150px;overflow:hidden}
</style>

<div>
  <iframe src="foo.html" scrolling="no"></iframe>
</div>

Hope this helps.

Answer 4

Using Chrome 8.0.552.224 beta under Ubuntu 10.10 is showing still the ghost scrollbars on this site: http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe_scrolling. I tried all tricks what works in all browsers but not in WebKit based browser. Therefore the bug seems not to be fixed completely.

Answer 5

Setting the iframe's scrolling attribute to "no" should fix this, but there appears to be a bug in webkit: https://bugs.webkit.org/show_bug.cgi?id=29240

Tim's work-around ( Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar ) seems to fix the issue -- as long as you have the ability to edit the document contained by the iframe...

Answer 6

Try this...

iframe { overflow:hidden; }