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 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?

Answer 1

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.

Answer 2

You can hide the scrollbars and maintain the scrolling functionality (by touchpad or scroll wheel, or touch and drag in a mobile phone or tablet, by using:

<style>   iframe::-webkit-scrollbar {       display: none;   }   </style> 

Obviously, you can change iframe to whatever fits your design, and you can add the equivalent -mozilla- property to get it work in firefox as well.