How to remove/disable new background-image transition in image style?

user_14840292 0
Viewed 3063

So, there is sudden addition to all images in all browsers for all people I know. Probably some kind of new update or standard, whatever. I don't know what it is and why it is.

But from now on, when You enter any image there is this thing:

<img style="
        -webkit-user-select: none;
        margin: auto;
        background-color: hsl(0, 0%, 90%);
        transition: background-color 300ms;"
        src="http://pngimg.com/uploads/light/light_PNG14421.png
">

I'm specifically saying about background-color: hsl(0, 0%, 90%) and transition: background-color 300ms;. In Firefox it looks like instead of Transition, there is just static white background. FOR NO REASON. You can't really see the difference in images that doesn't have transparent background, but if You directly open any kind of png image that does have alpha channel it suddenly have white backgronud.

Like http://pngimg.com/uploads/light/light_PNG14421.png enter image description here

this for example.

I tried to find out how to disable it, but I don't know why there is such background in a first place. So suddenly. I open images im browser to compare them so very often and it really annoys me, that now I can't do that. Anyone knows where it come from? Is there some sudden change in some CSS or HTML standards? Is it Windows thing? (However Android 11 does the same thing on Opera Touch...) or what?

And can I just remove any transition effects in img style by using something like Tampermonkey? If so, how can I do that?

To clarify... I want only background-color (and optionally transition) to remove. I've seen scripts that can remove whole div if the div containts something. But I don't want to remove img if the style contain anything. Just the remove the annoying style, which is unnecessary.

Thanks in advance. I tried to make the script myself from what i found in Google, but it's few days already and can't figure it out.

userscripts css html
1 Answers

There is not enough information for a proper answer, therefore the answer will be general.

Find the image/s
You would need some criteria to pinpoint the correct images, like id, class, etc
I used src in this example

const images = document.querySelectorAll('img[src^="http://pngimg.com/uploads/"]');

Loop through images and make changes

images.forEach(img => {
  img.style.backgroundColor = 'transparent';  // change to whatever desired
  img.style.transitionProperty = 'none';      // change to whatever desired
}):

Alternative Methods

With above UserScript changes are made at the time script runs. If images are created dynamically & later, then addition code is needed to wait for the change and apply/reapply the changes.

You can also use UserScript to insert CSS. CSS rules are applied to all images present and those that are created dynamically later.

Here is an example ....

const css = `
img[src^="http://pngimg.com/uploads/"] {
  background-color: transparent !important;
  transition-property: none !important;
}`;

GM_addStyle(css); // TamperMoneky | ViolentMonkey | FireMonkey
// or 
GM.addStyle(css); // GreaseMonkey | TamperMoneky | ViolentMonkey | FireMonkey

You can also use UserStyle/UserCSS (Stylish | Stylus | xStyle | FireMonkey) to achieve similar outcome. Using UserStyle/UserCSS has lower overheads in comparison to UserScript.

Here is an example of UserStyle. You would need to set the matching URLs in the UserStyle controls.

img[src^="http://pngimg.com/uploads/"] {
  background-color: transparent !important;
  transition-property: none !important;
}

Here is an example of FireMonkey UserCSS

/*
==UserCSS==
@name           Change Background
@match          .... the site to match
==/UserCSS==
*/

img[src^="http://pngimg.com/uploads/"] {
  background-color: transparent !important;
  transition-property: none !important;
}

Update on Comment

It's opening the image itself (right click and "Open image in new tab").

I see.... here are some examples.

  • Tested on http://pngimg.com/uploads/light/light_PNG14421.png with Firefox 87.0a1
  • Based on URLs ending in .png

FireMonkey UserCSS

/*
==UserCSS==
@name           Remove Image background
@match          *://*/*.png
@run-at         document-start
==/UserCSS==
*/

img {
  background: transparent !important;
}

UserScript with any manager (GreaseMonkey | TamperMoneky | ViolentMonkey | FireMonkey)

// ==UserScript==
// @name          Remove Image background
// @match         *://*/*.png
// @run-at        document-start
// @grant         GM.addStyle
// ==/UserScript==

GM.addStyle('img {background: transparent !important;}');

UserScript with TM | VM | FM (using legacy GM_addStyle with TamperMoneky | ViolentMonkey | FireMonkey)

// ==UserScript==
// @name          Remove Image background
// @match         *://*/*.png
// @run-at        document-start
// @grant         GM_addStyle
// ==/UserScript==

GM_addStyle('img {background: transparent !important;}');

UserScript without GM functions

// ==UserScript==
// @name          Remove Image background
// @match         *://*/*.png
// @run-at        document-start
// ==/UserScript==

(() => {

const style = document.createElement('style');
style.textContent = 'img {background: transparent !important;}';
(document.head || document.body).appendChild(style);

})();

Note

If file:/// processing is required, then add

// @match         file:///*.png
user_35294560
Related