Logo brand blurred on hover

Hi,

Logo brands get blurred on hover on Edge and Chrome, not on Mozilla.
You cannot really see it on the video, check it out for clarification.

Thanks for your help!
Regards,

Hi,

The following issue is caused by WebKit browser downscaled image rendering and didn’t relate to our theme. For better site performance and visual look image sizes need to be served in correct proportions. For example if the column has 300px width – the image placed in that column must be in close sizes for example 300-400px. In your case you placed 300px image (https://prnt.sc/11sxlip) in 198px container (https://prnt.sc/11sxmvz) – in result this usage create almost x2 downscaling that may cause browser rendering issues in WebKit browsers.

More about this issue can be found here:
https://bugs.chromium.org/p/chromium/issues/detail?id=562162
https://stackoverflow.com/questions/37906602/blurry-downscaled-images-in-chrome

To fix this issue we can suggest reducing image sizes close to the container size or add following custom code which is commonly suggested in similar image issues on StackOverflow.

.brands-widget .brand-item img {
    image-rendering: -webkit-optimize-contrast;
}

Code need to be placed to the Custom CSS area in Theme Settings

Kind Regards

Hi,

Thanks for the quick reply.
I replaced all the images by 180×100 and the problem persists. What is the most suitable size?

Best regards

Hi,

You can find the real picture size and the size which the picture takes up on the screen using browser DevTools like shown on video (https://gyazo.com/000a93fb4e877a32012463197a56eb28).

Real image file size (https://prnt.sc/11v12o1).
Size which the picture takes up on the screen (https://prnt.sc/11v14zg).

When real size of the image and size which the picture takes up on the screen will be equal or as close as possible blurring effect will be most insignificant. If you’re done following changes and blurring still persist, try to use custom code from first reply.

Kind Regards

Hi,

Ok I understand but why then do you use 180×100 in your demos? https://imgur.com/a/Setl9yZ
The problem is logo quality is compromised using 108×60 .

I used to display svg’s but they can be heavy and not performance friendly.
Do you have other suggestions?

Thanks!

Generally image blur during transition is normal behavior for WebKit browsers, but we consider to change images size on our demo.

If you serve SVG images via <img> tag image blur can be visible as well as on default raster images.

If blur on hover is critical for you, we suggest you to use the following custom code to fix this issue:

.brands-widget .brand-item img {
    image-rendering: -webkit-optimize-contrast;
}

Kind Regards

[Author]

Posts