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

[shuynh]

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:

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

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:

PRB582664 is open to document the two scrollbars displaying with Fuji (this did not occur prior to this version).

PRB637950 is open to document the scrollbar rendering inconsistency in IE11.

ServiceNow KB: PRB648291: Vertical scroll bars are overlaid and overlapped on incident form in CMS o...

*For more IE solutions see The top 5 Internet Explorer(IE) ServiceNow Solutions