logo

NJP

Use a style property to correct overlapping scrollbars on an iFrame in IE11

Import · Oct 21, 2015 · article

Are you using Internet Explorer 11 when viewing a CMS site? Does the site utilizes CMS pages with iFrames? If so, you may have noticed two vertical scrollbars (one for the iFrame and one for the browser) are overlaid on top of each other. This doesn't happen with Chrome or Firefox.

As of Fuji, Chrome (or Firefox) displays two scrollbars on a page with an iFrame like this:

image

As a result and a secondary issue, IE11 displays the two scrollbars on top of each other and overlaps the page components:

image

In an effort to identify a workaround for the overlapped scrollbars in Internet Explorer 11, the -ms-overflow-style property can be used to define the overflow behavior, as mentioned in MSDN.

Set the style to scrollbar to get the scrollbars back:

-ms-overflow-style: scrollbar;

scrollbar

Indicates the element displays a classic scrollbar-type control when its content overflows. Unlike -ms-autohiding-scrollbar, scrollbars on elements with the -ms-overflow-style property set to scrollbar always appear on the screen and do not fade out when the element is inactive. Scrollbars do not overlay content, and therefore take up extra layout space along the edges of the element where they appear.

Continuing with the out-of-box example, you can add this to the base Style Sheet associated to the Site's Default theme: body{-ms-overflow-style: scrollbar !important;}

This allows Internet Explorer to display the scrollbars correctly and the rendering is consistent with Chrome and Firefox:

image

View original source

https://www.servicenow.com/community/now-platform-blog/use-a-style-property-to-correct-overlapping-scrollbars-on-an/ba-p/2285677