I have an IFRAME with overflows hidden in the css and html. It works in Firefox, but not Chrome/Safari
Why is this?
Add a comment |
8 Answers
Right, how about:
<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe> as in the scrolling="no"
9 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)
matewka
scrolling attribute is deprecated in HTML5 and it simply doesn't work there.
Joonas
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?
|
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.
Comments
<style> iframe::-webkit-scrollbar { display: none; } </style> As found on - Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar
Comments
Strange but - transform: rotate(0.00001deg); for div with overflow:hidden; helps for me.
1 Comment
Henrik Christensen
Worked for me as well. Also,
transform: translateZ(1px) did the same thing.Just width: 99.99%; did the trick for me.
I had this problem in Chrome but not in Firefox.
1 Comment
Konrad Gałęzowski
Unfortunatelly it not always does the trick. Sometimes it's 98%, sometimes 95% which makes it very fragile solution.
For anyone looking to do it using js
supposedly you already added the iframe using something like this
document.body.appendChild(iframe); you can add hide the scrollbar using this
iframe.setAttribute('scrolling', 'no'); I googled the whole web and hardly found it.
credits : Allowing Only iFrame Scrolling and Disabling Main-Page Scrolling: What You Need to Know
Comments
Use overflow-y:hidden; then the vertical scroll will be hidden.
1 Comment
dukevin
This did not work in Google Chrome for IFRAMES, Lollero's answer did work
