Firefox: z-index rule in content.css breaks Tumblr dashboard

[benlk]

The problem

NoScript's injected CSS is breaking the Tumblr Dashboard.

How I diagnosed this

The tumblr dashboard https://www.tumblr.com/dashboard is loading with broken styles. The main column of posts has had its z-index increased by the following style rule:

.__ns__pop2top {
    z-index: 2147483647 !important;
}

This rule is attributed by Firefox's developer tools to the source file moz-extension://4ade9a21-c640-4c10-8b09-fa88f17749d4/content/content.css . The source plugin is identified in moz-extension://4ade9a21-c640-4c10-8b09-fa88f17749d4/manifest.json as NoScript.

For veracity, I right-clicked on the NoScript icon in my browser bar to open "Manage Extension", then clicked the menu on NoScript's entry in about:addons to open NoScript's settings page at moz-extension://4ade9a21-c640-4c10-8b09-fa88f17749d4/ui/options.html

The extension IDs for the URLs of NoScript's settings and this injected CSS stylesheet match. Thus, I conclude that NoScript is causing the problem.

The problematic CSS appears to be this:

https://github.com/hackademix/noscript/blob/f7d56c30f1cc0372f51a39c21f8eb23490170c24/src/content/content.css#L15-L17

This does not look like a case of a conflict between NoScript's class name and Tumblr's generated classname; Tumblr's autogenerated CSS class names seem to all be 5 characters long. This __ns__pop2top class has been added to several elements on the webpage, as can be seen in the screenshot above.

If I disable NoScript in the tab, the classes are not injected on the elements, and the page appears as expected.

I took a quick look through the plugin's codebase to see if I could find where the __ns__pop2top class was being added to code, but didn't see that classname anywhere that wasn't a CSS file.

[General1Chaos]

I am also having this issue.

The problematic CSS appears to be this:

https://github.com/hackademix/noscript/blob/f7d56c30f1cc0372f51a39c21f8eb23490170c24/src/content/content.css#L15-L17

This does not look like a case of a conflict between NoScript's class name and Tumblr's generated classname; Tumblr's autogenerated CSS class names seem to all be 5 characters long. This __ns__pop2top class has been added to several elements on the webpage, as can be seen in the screenshot above.

If I disable NoScript in the tab, the classes are not injected on the elements, and the page appears as expected.

I took a quick look through the plugin's codebase to see if I could find where the __ns__pop2top class was being added to code, but didn't see that classname anywhere that wasn't a CSS file.

I tracked the "nspop2top" class to the NoScript Commons Library, specifically in the replace() function in PlaceHolder.js

I'm currently reading the docs to see if I can possibly fix whatever is making NoScript put this class on random elements of the tumblr dashboard. I'm new both to GitHub and this project, so I can only hope it will be an easy enough fix that I can do the pull request thing soon.

[arielsbecker]

I'm experiencing a very similar issue in Pleroma and Soapbox. Some elements (like modals and popups) are being displayed below the rest. Traced the culprit to the injected CSS class __ns__pop2top.

Is there a way to disable CSS injection? Thanks.