Can't seem to find the rule that is causing the blur.

[cpp-dev]

Hey all.

So on one page, there are images that blur when not rolled over. When the transition is triggered, it has a momentary flash of clarity, then becomes blurry again. I've looked in the inspector (MS Edge - chromium) but I can not seem to find what is causing the blur effect.

a short video of what I'm seeing.

[RTHOMASDESIGN]

The images appear blurry because they're downscaled quite a bit. Chrome doesn't always do the best job with downscaling. You can try using the following style to reduce the blur: image-rendering: -webkit-optimize-contrast;

.category-product-layout .flag .category-product-image-wrapper img {
image-rendering: -webkit-optimize-contrast;
}

I noticed that on that category page, the native thumbnail resolution is 255x238px, however, they're displaying at 129x120px. It doesn't look like they get larger at any breakpoint either. So you might as well just render them out at a lower resolution (129x120 or so).

Hope this helps!
-Ryan

[cpp-dev]

I appreciate the insight RTHOMASDESIGN ! I'll give that some looking!