-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Open
Labels
Description
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-upandlazyloadclasses 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;
},
});saas786