When using the Web Component API on my Headless site to display product media, I noticed if your product images are transparent PNGs, the “unpic” system they use to show a low-res 24px blurry placeholder before the full image loads causes a visual issue, you can see the placeholder behind the transparent areas, resulting in a weird glow effect.
There doesn’t seem to be an obvious way to fix this other than not using transparent images, which isn’t feasible for me since my images come from an external supplier.
It’s a shame because the placeholder background feature is really nice, but I’ll likely have to hide it to avoid this problem. Seems like this could be considered a bug or at least a limitation of the current implementation?
Has anyone found a workaround for this scenario without converting all images to non-transparent formats?
<shopify-context type="product" handle="product-handle">
<template>
<shopify-list-context type="media" query="product.media" first="2">
<template>
<shopify-media query="media" width="200" height="200"></shopify-media>
</template>
</shopify-list-context>
</template>
</shopify-context>