Per-site JavaScript blocking breaks page DOM that results in CSS issues (affected: Gatsby JS framework websites) #2642
Description
Prerequisites
- I verified that this is not a filter list issue. Report any issues with filter lists or broken website functionality in the uAssets issue tracker.
- This is not a support issue or a question. For support, questions, or help, visit /r/uBlockOrigin.
- I performed a cursory search of the issue tracker to avoid opening a duplicate issue.
- The issue is not present after disabling uBO in the browser.
- I checked the documentation to understand that the issue I am reporting is not normal behavior.
I tried to reproduce the issue when...
- uBO is the only extension.
- uBO uses default lists and settings.
- using a new, unmodified browser profile.
Description
Detailed issue: gatsbyjs/gatsby#38065
Gatsby is a web framework for building websites. It includes a very convenient component called GatsbyImage for resizing and placing images. The component also includes all types of image placeholder support: this way, initially the user seems some kind of placeholder, the browser loads the desired image, and when the image is loaded, the framework uses JavaScript to switch it.
For years now, it supported a way to do so without JavaScript, using <noscript> tags. One tag goes into the <head> and enables the styles that should only apply when nice, placeholder-y way of loading images is not available. Then, for every image that has a placeholder, we have both tags for JavaScript-enabled way of loading and a <noscript> tag in case JavaScript is disabled.
If we disable JavaScript using Firefox native about:config ways, everything works as intended.
When we use a uBO site-specific JavaScript disable for a Gatsby-powered site, the following happens:
- The
<noscript>in head is replaced with a<span>tag. A<span>should not be in the header, so that probably breaks things—or at least the validation. Can be fixed with changing the selector here https://github.com/gorhill/uBlock/blob/master/src/js/scriptlets/noscript-spoof.js#L33 to only affectbody noscript. - It also replaces all other
<noscript>elements with<span style="display: inline !important">. Because of that, rules with selectors like.gatsby-image-wrapper noscript [data-main-image](an actual selector Gatsby uses) no longer work, because there is nonoscripttag anymore.
I'm not sure of the reasoning behind actually replacing <noscript> tags with spans (obviously you had good reasons), but in the end it may (and it does) break header styles and selectors quite easily. Not sure what the solution might be here.
A specific URL where the issue occurs.
gatsbyjs.com
Steps to Reproduce
- Install the latest uBO and Firefox Stable or Developer Edition.
- Visit gatsbyjs.com.
- Notice a graphic banner at the right side of the page.
- Install uBO, activate site-specific JS blocking, reload the page.
- Notice that the image disappeared.
Expected behavior
The image works using noscript tags and selectors exactly as in Firefox javascript.enable=false mode.
Actual behavior
The image disappears.
uBO version
1.49.0
Browser name and version
Firefox Stable 112.0.2 (64-bit)
Operating System and version
macOS 13.3.1