SOLVED: Image or Logo element get blurry on header

Bugs
1

Bricks Version: 1.5
Browser: Chrome 90
OS: macOS
URL: https://dev.deyril.com/

Hello Thomas & Team,

the image/logo element on header looks blurry on the front end?
i’ve uploaded the logo with 512x512, and set image size with css to 60px, and i’ve try some test to add a image/logo element on section at the homepage, but the image get sharpen which no problem there. Any idea for this problem?

I just found the point of the problem, it’s because i’ve set the container inside the header to be position:fixed

This is weird, even on my main website https://deyril.com/ have the same style and the logo looks crisp well

image
image1614×456 66.4 KB

[Please describe in as much detail as possible how we can replicate this bug]

2

I also shared this on your post in the FB Group, but will share it here as well (in case the developers have any further insights here on the forum):

If you can’t use an SVG (which is the best option), then maybe these 2 articles will help?

1.) image-rendering - CSS: Cascading Style Sheets | MDN

2.) CSS Code to Fix blurry image when scaling down - Tutorials Class

3

Hello @crsmoore

Wow, thank you so much for the reference, it’s work with

-webkit-backface-visibility: hidden;
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
1 Like