Bug #11378
openRegression: bootstrap-style boot can display a flash of unstyled content
0%
Description
With Wt 4.9.1, a bootstrap-style boot can display a flash of unstyled content under limited circumstances. The issue can be observed with the Firefox browser and the widgetgallery example by visiting a page that doesn't use progressive bootstrap and specifying the bootstrap3 theme, e.g .../layout/layout-managers?theme=bootstrap3. To make the issue more visible, open the browser debugger network tab and disable cache and enable throttling, e.g. "Regular 2G" or "GPRS".
I believe the root cause is the removal of the final script block in boot.html, which causes Firefox to deliver the DOMContentLoaded event before all required CSS has loaded.
NOTE: The bootstrap5 theme masks this issue because it loads additional javascript to support bootstrap5 with require(), and the CSS is generally available by the time the bootstrap5 javascript is ready. Also, I have only observed the issue when testing with Firefox (versions 108 and 110). The issue does not occur with Chromium (versions 108 and 110).
Attached, for your review, is a patch that seems to help with the issue. Additional notes are on the patch.
Files
Updated by Bruce Toll almost 2 years ago
The attached patch is incorrect -- impressive for such a trivial patch. I was originally using a console.log for testing and wanted to replace it with a safe no-op, but this wasn't it. I'll provide an update.
Updated by Bruce Toll almost 2 years ago
- File 0001-Fix-flash-of-unstyled-content-in-boot.html_rev02.patch 0001-Fix-flash-of-unstyled-content-in-boot.html_rev02.patch added
Updated the patch... The earlier one would fail if Wt was undefined.
Updated by Bruce Toll almost 2 years ago
While I believe this is primarily a cosmetic issue, it can adversely affect some layouts. One way this can occur is if the CSS adds padding to an element, e.g. with a Bootstrap 3 well. According to the WLayout documentation, setContentsMargins() should be used in place of padding, so the use of a Bootstrap 3 well in a WLayout could probably be classed as a usage error. But, a library user might inadvertently break the rule and not encounter a problem prior to this regression.