Skip to content

<picture> wrapper inherits original <img> class, breaking CSS meant only for the <img> #65

Description

@Bansi-Chopada

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.

Image

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;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions