Css – Safari/Chrome (Webkit) – Cannot hide iframe vertical scrollbar

cssiframesafariscrollbarwebkit

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 iframe so that the frame will not need any scrollbars to display the contained webpage.

On Firefox and IE this works great, there is no scrollbar since I use <iframe ... scrolling="no"></iframe>. However, on webkit browsers (Safari and Chrome), the vertical scrollbar persists even when there is sufficient room for the page without the scrollbar (the scrollbar is grayed out).

How do I hide the scrollbar for webkit browsers?

Best Answer

I just ran into this problem, and discovered that the fix was to set overflow: hidden on the HTML tag of the page inside the iframe.

Related Solutions

Html – Hide html horizontal but not vertical scrollbar

You can use css like this:

overflow-y: scroll;
overflow-x: hidden;

Javascript – Full-screen iframe with a height of 100%

You could use frameset as the previous answer states but if you are insistent on using iFrames, the 2 following examples should work:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

An alternative:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

To hide scrolling with 2 alternatives as shown above:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

Hack with the second example:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

To hide the scroll-bars of the iFrame, the parent is made overflow: hidden to hide scrollbars and the iFrame is made to go upto 150% width and height which forces the scroll-bars outside the page and since the body doesn't have scroll-bars one may not expect the iframe to be exceeding the bounds of the page. This hides the scrollbars of the iFrame with full width!

Best Answer

Related Solutions

Html – Hide html horizontal but not vertical scrollbar

Javascript – Full-screen iframe with a height of 100%

Related Topic