Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blur up image inline styles are lost #991

Open
Csszabi98 opened this issue Jun 30, 2023 · 0 comments
Open

Blur up image inline styles are lost #991

Csszabi98 opened this issue Jun 30, 2023 · 0 comments
Labels

Comments

@Csszabi98
Copy link

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;
    },
  });
@Csszabi98 Csszabi98 added the bug label Jun 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant