Blur up image inline styles are lost
Csszabi98 opened this issue · 0 comments
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:
- Use the blur-up plugin for lazysizes.
- Set inline styles on an Image element (e.g.:
aspect-ration: 1 / 1;
) - Add
blur-up
andlazyload
classes to the element - 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;
},
});