Adding multiple iFrames to a CMS page causes the pages scroll bar to explode causing unwanted white space

Adding multiple iFrames to a CMS page makes the scroll bar expand and causes a lot of white space, and makes the IFrames disappear.

1. Log in to Fuji instance.
2. Navigate to Content Management > Pages.
3. Select New to create a new content page with suffix of test_page and associate to the base system Employee Self-Service (ESS) site.
4. Start adding iFrames (~5) to the page.
5. Launch the CMS page (for example, https:<instance>.service-now.com/ess/test_site).
6. Note that the scroll bar is huge and there is a lot of white space.

1. Go to the affected iFrame block and update the sizing from Size to fit content to Fixed size
2. Edit the render_content_block_iframe UI Macro from height=100% to height=auto.

Following is an example workaround used in Geneva.

1. Back up the base system version of the UI Macro named render_content_block_iframe.
2. Replace the XML code with the following:
   
   <?xml version="1.0" encoding="utf-8" ?>
   <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
   <g:evaluate var="jvar_frame_url">
   var current_url = new GlideURL(current.url);
   current_url.set("sysparm_nameofstack", GlideGuid.generate(null));
   current_url.set("sysparm_clear_stack", "yes");
   var url = current_url.toString();
   url;
   </g:evaluate>
   <j:if test="${current.sizing != 'expand'}">
   <iframe class="content_embedded" frameborder="0" style="height:${current.height}px;width:${current.width}px" src="${jvar_frame_url}" name="${current.frame_name}"/>
   </j:if>
   <j:if test="${current.sizing == 'expand'}">
   <g:set_if test="${current.frame_name.nil()}" var="jvar_frame_name" true="${current.sys_id}" false="${current.frame_name}" />
   <iframe width="100%" height="1200" name="${jvar_frame_name}" id="${jvar_frame_name}" frameborder="0" border="0" allowtransparency="true" src="${jvar_frame_url}" scrolling="yes"/>
   <!-- <script>
   (function() {
   CustomEvent.observe('content_frame.resized', contentFrameResized);
   CustomEvent.observe('content_frame.loaded', contentFrameResized);
   var isFirefox = navigator.userAgent.indexOf('Firefox') > -1;
   
   function contentFrameResized(name, height) {
   if (!name)
   return;
   
   var f = $(name);
   if (!f)
   return;
   
   // avoid using an AND here
   if (!isFirefox || height == 10)
   _resize(f, height);
   else {
   // delay resize for firefox
   setTimeout(function() {
   _resize(f, height);
   }, 0);
   }
   }
   
   function _resize(f, height) {
   f.height = height;
   }
   
   $('${jvar_frame_name}').on('load', function() {
   window.scrollTo(0, 0);
   });
   })();
   </script> -->
   </j:if>
   </j:jelly>