When JavaScript is disabled, WET lightbox/modal content (e.g. .mfp-hide) is expected to be displayed as standard inline content using the noscript.css fallback.
However, in the current WxT implementation, the <noscript> stylesheet is injected via hook_page_attachments() using html_head, which results in the following render order:
<head>
<noscript><link rel="stylesheet" href="/libraries/wet-boew/css/noscript.css"></noscript>
...
<link rel="stylesheet" href="...theme.css">
<link rel="stylesheet" href="...wxt.css">
</head>
Because of this, rules in noscript.css (e.g. .mfp-hide { display: block !important; }) are overridden by later-loaded CSS that includes:
.mfp-hide {
display: none !important;
}
As both rules use !important, the later-loaded CSS takes precedence, causing modal content to remain hidden when JavaScript is disabled.
Add a page with a modal, HTML can be taken from here - https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html
Disable JavaScript in your browser and load the page, notice the modal is not displayed under the link to trigger it.
Move the <noscript> stylesheet injection out of html_head and render it after <css-placeholder> in html.html.twig.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | wxt-library-fix-noscript-load-order-3580943-2.patch | 1.81 KB | smulvih2 |
| #2 | wxt-bootstrap-fix-noscript-load-order-3580943-2.patch | 631 bytes | smulvih2 |
Comments
Comment #2
smulvih2Patches attached for wxt_library and wxt_bootstrap to fix the issue. Since html_head is printed in html.html.twig above all CSS, we need to add the no-script under the CSS palceholder. Also can't include noscript in CSS placeholder since it needs to be wrapped in a noscript tag, so using hook_preprocess_html() for this. With the patches applied, the noscript element is added below all CSS, same as on Canada.ca.
Comment #3
smulvih2Pushed fix to both repos for 10.6.x and 11.3.x.
Comment #4
smulvih2New versions pushed for wxt_library and wxt_bootstrap; 11.3.1 and 10.6.1 for both.