filter:url make page appear blank
I'm not sure if this is considered a bug or not, since it is bad coding. But, it is inconsistent with other browsers... When our company website was "upgraded" last year, they didn't fix some old links. One set of pages include code that looks like this:
<style type="text/css">html {filter: url(#normal); -webkit-filter: url(#normal); -moz-filter: url(#normal); -o-filter: url(#normal); -ms-filter: url(#normal); }</style>
The coding error here, is that the image filter isn't being applied to an SVG, but rather the whole html page. This is why I'm not sure if it would be considered a bug in Firefox or not. Chrome based browsers seem to ignore the bad code. Firefox applies the non-existent #normal filter to the html element (the whole page), resulting in a completely blank page.
I did report the bad code to my company, but I doubt they will fix it - they currently suggest Chrome (which took them forever to do), but still require Internet Explorer for one specific config page.
note: this isn't an extension issue. I tested it in Firefox's safe mode. It applies to both Firefox for Windows and Firefox for Android.
All Replies (3)
You can possibly add code to the userContent.css file to override CSS rules. I'm not sure which of the filter properties you need to override for Firefox in case 'filter' isn't enough, so you will have to test this. You can possibly check this in the Inspector.
You need to replace '...' with the correct domain where to apply the rule(s).
@-moz-document domain(...) {
filter: unset !important;
}
- https://www.userchrome.org/what-is-userchrome-css.html
- https://www.userchrome.org/how-create-userchrome-css.html
In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.
- about:config => toolkit.legacyUserProfileCustomizations.stylesheets = true
Modified by cor-el
Yeah, for now I've been using the Stylus addon (essentially the same as using usercontent.css). It can work with uBlock Origin too, but seems to have to apply sitewide (instead of the subset of pages with the coding error). I wasn't sure if I should report on Bugzilla or not though, since it only happens because of a coding error. But, at the same time, I feel like firefox should ignore the filter CSS rule when it isn't applying to an image. Is this something that should be listed on the Bugzilla?
Yes, please file a bug if there isn't one already. If the image cannot be loaded, the rule should be ignored.
If the filter references a non-existent object or the referenced object is not a filter element, then the whole filter chain is ignored. No filter is applied to the object.
Reference: https://drafts.fxtf.org/filter-effects/#FilterProperty