Module: yireo/magento2-webp2 ^0.14.3
Magento: 2.4.8
When this module converts an <img> into a <picture>/WebP wrapper, it copies the original class attribute onto both the new <picture> element and the inner <img>:
<picture class="group-image">
<source type="image/webp" srcset="...">
<img class="group-image" src="...">
</picture>
Problem: <picture> defaults to display: inline (unlike <img>), so any existing CSS targeting that class with border/padding/fixed width/height (intended only for the <img>) now also applies to the <picture> wrapper - causing broken/disconnected border rendering.
Reproduced with mageprince/module-faq's Hyvä template, which styles .group-image this way.
Suggestion: don't duplicate the class onto <picture>, or set display: block (or contents) on the generated <picture> by default.
Workaround:
picture.your-class {
display: block;
border: 0; padding: 0; width: auto; height: auto;
}
Module: yireo/magento2-webp2 ^0.14.3
Magento: 2.4.8
When this module converts an
<img>into a<picture>/WebP wrapper, it copies the originalclassattribute onto both the new<picture>element and the inner<img>:Problem:
<picture>defaults todisplay: inline(unlike<img>), so any existing CSS targeting that class withborder/padding/fixedwidth/height(intended only for the<img>) now also applies to the<picture>wrapper - causing broken/disconnected border rendering.Reproduced with
mageprince/module-faq's Hyvä template, which styles.group-imagethis way.Suggestion: don't duplicate the class onto
<picture>, or setdisplay: block(orcontents) on the generated<picture>by default.Workaround: