neve icon indicating copy to clipboard operation
neve copied to clipboard

Published 20 hours ago • verified publisher icon Codeinwp

Header logo looks a bit blurry in Chrome

Open mghenciu opened this issue 4 years ago • 9 comments

Description:

The logo from demos, part of the Header, are blurry in Chrome - compared to other browsers (Firefox, Safari). The issue is not the image quality as the logos go above 300px.

From a quick search, it looks to be an issue with how Chrome renders images on Mac: https://stackoverflow.com/questions/37906602/blurry-downscaled-images-in-chrome and image-rendering: -webkit-optimize-contrast; fixes the problem (not sure if it's the best solution)

How to reproduce:

  1. Open any demo in Chrome (on Mac) and other browser (Safari of Firefox)
  2. Notice the difference between how the logos look depending on the browser

Expected behaviour:

Logo in Chrome shouldn't be blurred

Current behaviour:

Logo in Chrome is blurred

Reference (the back layers is Chrome):

image image

Technical info

  • WordPress version: 5.5.1
  • Theme version: v2.8.3

mghenciu avatar Oct 19 '20 14:10 mghenciu

@mghenciu is this still happening for you? I checked and from what I've seen, there are no issues. Might be due to an upgrade for Chrome.

cristian-ungureanu avatar Apr 04 '22 12:04 cristian-ungureanu

@mghenciu is this still happening for you? I checked and from what I've seen, there are no issues. Might be due to an upgrade for Chrome.

I'll take another look tomorrow on the Laptop, Cristi. Now, on my PC + External Monitor - I don't see the difference: image

mghenciu avatar Apr 04 '22 13:04 mghenciu

I checked now on the same device, and here are the results:

  • on the 4k External Monitor, the blur/any differences are not visible
  • while on the MacBook Pro built-in display, there is a difference between how it looks in Chrome vs Safari & Firefox

Here's how it looks on the Retina screen (blur in the first logo): Screenshot 2022-04-05 at 08 35 11

And same tabs but with image-rendering: -webkit-optimize-contrast; applied to the Logo in Chrome (first one): Screenshot 2022-04-05 at 08 34 12

There is a small difference, but I would say that is very specific, and visible just on some screens. And, as mentioned before, it's a known issue in the web community, related to Chromium browsers. But I guess it's up to us, if we want mitigate this somehow, or not.

mghenciu avatar Apr 05 '22 05:04 mghenciu

@abaicus do you have any thoughts on this? Should we add image-rendering: -webkit-optimize-contrast; ?

cristian-ungureanu avatar Apr 05 '22 07:04 cristian-ungureanu

@cristian-ungureanu @mghenciu Can we check how other themes handle this issue?

abaicus avatar Apr 05 '22 09:04 abaicus

PS: I think it would be a good idea to add it regardless.

abaicus avatar Apr 05 '22 09:04 abaicus

Thank you! I will check how others handle this and get back here.

cristian-ungureanu avatar Apr 05 '22 14:04 cristian-ungureanu

I will put this task on hold. I had a look at the most used themes and no one is using image-rendering: -webkit-optimize-contrast;. We can get back to this after a while and see what we can do.

cristian-ungureanu avatar Apr 08 '22 10:04 cristian-ungureanu

Chome team has marked the bug as wontfix so it seems at least for now the issue would continue on chrome https://bugs.chromium.org/p/chromium/issues/detail?id=562162

UVLabs avatar Apr 29 '22 19:04 UVLabs