Blur up image inline styles are lost

[Csszabi98]

Describe the bug When using the blur up plugin, the inline style set for the images are lost during the plugin execution.

Steps to reproduce the behavior:

1. Use the blur-up plugin for lazysizes.
2. Set inline styles on an Image element (e.g.: aspect-ration: 1 / 1;)
3. Add blur-up and lazyload classes to the element
4. After blur up finishes, the inline styles are lost

What is the expected behavior: The CSS properties should be preserved.

What happened instead: The CSS properties are getting lost.

Root cause At https://github.com/aFarkas/lazysizes/blob/gh-pages/plugins/blur-up/ls.blur-up.js#L111C4-L111C11

The following line

blurImg.cssText = img.cssText;

should be instead:

blurImg.style.cssText = img.style.cssText;

cssText is a property of style attribute of the element, not the element itself. See: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText

Workaround As a workaround, it is possible to set up the cssText attribute for the HTMLImageElement to proxy the element.style.cssText attribute:

  Object.defineProperty(window.HTMLImageElement.prototype, 'cssText', {
    get() {
      return this.style.cssText;
    },
    set(newCssText) {
      this.style.cssText = newCssText;
    },
  });