Container queries

[thisisjamessmith]

Thank you for this extremely useful tool. The sizes attribute suggestions alone make it a huge timesaver for me. Sadly, it seems to get a bit confused when using container queries - would be great to get that scenario covered if possible.

[ausi]

Can you provide an example where this causes an issue. All CSS features should work with the linter, I don’t see why container queries in particular would be different. Do you use container queries in combination with CSS transitions or animations? If so, your problem might be a duplicate of https://github.com/ausi/respimagelint/issues/53 if not, I need to investigate it in more detail.

Are all browsers (Firefox, Safari and Chrome) affected the same way?

[ausi]

I just tried it out with a simple test setup:

<div>
    <img
        sizes="(min-width: 721px) 10vw, 20vw"
        src="800x800.jpg"
        srcset="200x200.jpg 200w, 400x400.jpg 400w, 800x800.jpg 800w"
    >
</div>
<style>
    div {
        container-type: inline-size;
    }
    img {
        width: 20cqw;
        height: auto;
    }
    @container (width > 720px) {
        img {
            width: 10cqw;
        }
    }
</style>

But it worked as expected and I was not able to reproduce any issue.

[thisisjamessmith]

Ah thanks for your fast reply. Good to know that it should work properly - I guess there must be something else at play - I'll endeavour to test more thoroughly soon. I have disabled all transitions and lazyloading so I'm not sure it's that.

[ausi]

Feel free to post a link to the affected page if it is publicly accessible