Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • cpp-dev
    replied
    I appreciate the insight RTHOMASDESIGN ! I'll give that some looking!

    Leave a comment:


  • RTHOMASDESIGN
    replied
    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

    Leave a comment:


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

    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.

Working...
X