Css a problikávání obrázku

Prosím poradí mi někdo, proč mi problikává obrázek u produktů? Pochopitelně to má neblahý vliv na CLS, které se teď snažím vyřešit. Chová se to tak, že nejprve se zobrazí větší, pak menší a nakonec zase větší. Nejlépe je to vidět v anonymním okně CTRL+F5.

Zkoušel jsem něco jako:

Kód:

a.MagicZoom {
    height: 0px;
    line-height: 0px !important;
    padding-bottom: 100% !important;
    display: block !important;
    max-width: none !important;
}

.MagicZoom .mz-figure {
    height: 100%;
    position: absolute;
    width: 100%;
    top:0;
    left:0;
}
.MagicZoom > img,
.MagicZoom .mz-figure > img {
    height: 100%;
    object-fit: contain;
    object-position: center;
    max-height: none !important;
    transition: 0.1s !important;
}       

.MagicZoom {
position:relative;
}
.MagicZoom > img {
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
}

případně

Kód:

#productMainImage a {
    max-width: none !important;
}

Příklad URL:

https://www.puhy.cz/pohybove-cidlo-m...cidlo-598.html

Řeším to s autorem toho pluginu Magiczoom už několik týdnů a bohužel se mi nedaří. V css nejsem moc dobrý. Napadne někoho jak to fixnout?

Kód:

.mz-figure.mz-active > img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/><feComponentTransfer><feFuncA type=\'linear\' slope=\'0.6\'/></feComponentTransfer></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%) opacity(100%);
    filter: grayscale(100%) opacity(100%);
}

Díky, to bohužel nepomohlo. Prosím ještě o nějaký nápad?

Bliká protože má nastavenou animaci průhlednosti, pokud kód níže dám do Developer Tools > Editor stylů tak funguje:

Kód:

.mz-figure.mz-active > img {
    -webkit-filter: opacity(100%) !important;
    filter: opacity(100%) !important;
}

Díky, ale ještě to není ono. Pořád chová tak, že se nejprve zobrazí jakoby menší obrázek a ten se pak zvětší. To je to probliknutí. Chová se to teď takto:

https://photos.app.goo.gl/xQVZ6bU37ppimeFm9

Mě to funguje na Firefoxu, Chromu i Edgi :-) včetně exotickejch rozlišeních.

Takže smazat cache a několikrát Ctrl + F5

Tak to nechápu. Mám chrome, nástroje pro vývojáře, anonymní okno a ještě k tomu tam je zaškrtlý disable cache. A pořád to bliká.

Zkoušel jsem to css dát i do inline a pořád mi obrázek bliká.



Jak docílím toho, aby to fakt cache nepoužívalo? Případně nemůže to být cachování css na straně serveru? Jak to obejít?

Díky moc.