Turbo processes noscript children when merging head

1

I’m creating this topic in case anyone else bumps into a similar edge case with using noscript.

When turbo merges the HTML head, if any noscript children are present, they will be processed.

Example
I had an old login form that had a noscript tag to notify the user to turn javascript on. In the noscript, css was used to set the display to none for the normal content (the form).

With Turbo, on redirecting to the form after an incorrect login, the noscript was processed and the css to hide the content was applied even though javascript was still turned on. This was not the desired behaviour.

Reference
The below tweets helped me understand what was going on. I agree that this is an edge case and seeing as Turbo encourages progressive enhancement, a fix is probably not needed.

Screen Shot 2021-03-19 at 4.28.07 pm
Screen Shot 2021-03-19 at 4.28.07 pm1248×1314 192 KB

2

This was discussed with turbolinks (see: Problem with CSS in <noscript> · Issue #176 · turbolinks/turbolinks-classic · GitHub).

Code to address this was added to turbolinks and later removed because of other side effects, so devs would need to implement their own solutions for their specific needs.

If you use noscript tags, something like the following might help.

document.addEventListener('turbo:before-render', function (event) {
  event.detail.newBody.querySelectorAll('noscript').forEach((e) => e.remove());
});
2 Likes