CSS bundling disrupts UI display because of style sheet limits in Internet Explorer

Published on : Jan 30, 2014

Category : BizTalk360 Update

arunkumar

Author

We launched BizTalk360 Version 7.0 in November, 2013 with the major upgrade rewriting the complete UI in HTML5, moving away from Silverlight. Since then, We have been consistently adding additional features to the application by following the best development practices. Recently, We have been noticing some UI components misaligned as we add on features one after the other. We thank our customers and partners who provide us valuable feedback on using our new releases. One such issue is that, the modal dialog is completely off the screen and is out of bounds to control as shown in the screenshot below. IE9 - dialog misplaced One has to refresh the screen to gain access to the application again. We tried to do browser compatibility tests and were unable to reproduce the issue. The modal dialog is well placed in the browsers IE 10, Chrome and FF. IE10 - correctly placed The issue was reported on IE 9 browser. So We tried to make the best of the Developer Tools available with IE 10 browser by turning on IE 9 mode and IE 9 DOM standards. Unfortunately, the developer tools didn’t help us getting this issue reproduced. IE10 - Browser Mode and Standards (IE9) displaying dialog correctly We set up a test environment with IE 9 (final version  V 9.0.8112.16421) installed and continued with our testing. Yes, this time We were successful in reproducing the issue. It was not alone the placement of the dialog is a issue, but also the functionality. Modal dialogs doesn’t allow the user to interact with the layer beneath. But, here the dialog is misplaced and the user is able to interact with the components beneath. This can be understood looking at the screenshot below, the screen beneath is clear as opposed to the one in the IE 10 browser screens displayed above in this post. IE9 - dialog functionality malfunction allowing users to interact with elements beneath We use number of JavaScript libraries and style sheets in association with application development frameworks like bootstrap, durandal.js and knockout.js etc. As a best practice for application loading performance, We appropriately bundle them as scripts and styles. We took a direction to check for any errors in the scripts related to modal dialog and understand if they are by any means not compatible with IE 9 browser. We did a reference check with product documentation of all our libraries and their compatibility with IE 9. Thus We confined this to be a CSS style only issue and geared up to identify the cause. Tools like IETester etc. didn’t come to our rescue. We compared the CSS that are loaded on IE 9 and IE 10 (with IE 9 mode turned on developer tools) for the same page which had the UI component under study. We ensured that our network requests returned the bundle with all styles. To our surprise, We identified the styles related to modal dialog are not loaded on IE 9 as compared to other browsers. Comparison of Style rules loaded on IE 9 and IE 10 browsers This encouraged us to check Microsoft documentation. These two resources helped us to understand the limits of the IE browsers in detail: An excerpt from one of these references:  KB 262161 outlines the maximum number of style sheets and rules supported by Internet Explorer 6 to 9.
  • A sheet may contain up to 4095 rules – each network request for a css file / style bundle constitute a sheet as mentioned in this limitation
  • A sheet may @import up to 31 sheets
  • @import nesting supports up to 4 levels deep
As We are bundling number of style sheets together, We understood, We have overshot the limits of IE browser. Therefore, any new style additions for the upcoming features will not effectively get loaded on IE 9. This is what we inferred. We decided to split the bundles, so that we don’t lose any rules. Request for Style bundles This helped us loading all our required styles completely and the modal dialog feature started working normally on IE 9 as well. IE9 - Styles loaded completely