Vaddin 7 but CSS doesn't seem to load completely or work on IE 8 (but it wo

Vaadin 6 / 7 / 8 Framework UI
1

Hi Vaadin Experts,

As the subject says I am having issues with an application under IE 8 (yes I know support stopped for IE 8 in 2016 but a client insists on using IE 8). I am really not too sure on how to go about debugging this CSS issue in Vadiin - as such any pointers would be greatly appreciated.

In a nut shell if things are working I should be loading three (3) CSS files they do all load correctly and work under IE 11, the 3 files are:

https://10.6.2.92/PVG/VAADIN/themes/pvg/styles.css?v=7.7.12
https://10.6.2.92/PVG/VAADIN/widgetsets/com.quantumsi.app.pvg.ui.widgetset.Pvg_v7712Widgetset/popupbutton/popupbutton.css
https://10.6.2.92/PVG/VAADIN/widgetsets/com.quantumsi.app.pvg.ui.widgetset.Pvg_v7712Widgetset/filtertable/filtertable.css

But under IE8 only one seems CSS file seems to be read - but it is essentialy not functional - no styling - no background

https://10.6.2.92/PVG/VAADIN/themes/pvg/styles.css?v=7.7.12

Vaddin 7 but all the CSS doesn’t seem to load (or render) on IE 8 it seems to have an issue.

When running on IE8 don’t seem to load all my CSS and rendering is terrible almost as if there is non, adding “?debug” to the end of the URL I see the following “General Informatin abotu the application” - why would I get “<IE8 can’t detect this>” in the Vaadin debugger window?

Client engine version   7.7.12
Server engine version   7.7.12
Theme version           <IE8 can't detect this>
Widget set              com.quantumsi.app.pvg.ui.widgetset.Pvg_v7712Widgetset
Theme                   pvg
Communication method    Client to server: XHR, server to client: -
Heartbeat               300s

Same application Vaddin 7 all CSS fiels load into IE 11 and the application runs with no issue

When running on IE11 the application works fine, note Vaadin detects a “Theme version” as expected below in this working case. One intersting thing is there are a few more messages like “ass 3 measured 1 elements, fired 0 listeners and did 0 layouts.”, “No more changes in pass 5” and “First response processed 2104 ms after fetchStart”

Client engine version   7.7.12
Server engine version   7.7.12
Theme version           7.7.12
Widget set              com.quantumsi.app.pvg.ui.widgetset.Pvg_v7712Widgetset
Theme                   pvg
Communication method    Client to server: XHR, server to client: -
Heartbeat               300s
2

THE ROOT CAUSE (I solved the issue myself)

Although Vaadin 7 should support IE8 (and 9, and 10) there is a big undocumented caveat.

It seems that any IE browser below IE9 has a severlimitaton of loading CSS style sheets.

This article will describe it in detail: https://spaceninja.com/2015/03/31/ie-css-limits/

IE8 (actually IE9 and lower):

  • A stylesheet may contain up to 4095 selectors
  • A document may load up to 31 stylesheets
  • A stylesheet may @import up to 31 other stylesheets
  • @import nesting is limited to 4 levels deep

This is goofy, but you can load 31 stylesheets that each import 31 others, for a total of 961. And each of those imported stylesheets could import 31 more, and so on, up to a depth of 4, for a total of 314(or 923,521), but I don’t have a test case for that.

THE BIG ISSUE WITH VAADIN

Unfortunately the later versions of Vaadin 7 (e.g. 7.7.12) has such a large default theme set (valo) that there is not much left for the actual application to use for widgets and/or styling until the above limits are hit. Once a limit is hit things break down with odd behaviour and don’t load completely.

MY SOLUTION

I scripted a program in Eclipse to split “styles.css” into two nearly equal sized files “styles_p1.css” and “styles_p2.css” and then create a new “styles.css” file as follows:

/* combine the split parts from the original styles.css into a new styles.css */
@import url("styles_p1.css");
@import url("styles_p2.css");

Of course this could be done in several different ways (yes somemethods would be to progrmaticaly alster the thems) and I also realize I lose async loading but my solution does indeed solve my problem for several Vaadin applicatons at 7.7.12 and 7.7.13 release levels running on ancient browsers like IE8.

  • Jon Strabala