0

I'm developing a site and the demo may be seen here. The problem I face is when the logo's height reduces while scrolling, it blurs slightly most of the time. The same thing happens when I again scroll up, and the logo is restored to its original size. This happens in Chrome and IE (Edge), but works fine in Firefox.

I guess it is happening because of the CSS3 transitions that are applied. If I remove the transition, it scales fine.

transition: all 0.3s ease-in-out;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-delay: initial;

The property that the transition is applied on is height.

Initially: height: 3.125rem; Upon scroll: height: 2.375rem;

I've tried adding the following, given here, but it did not work. In fact, adding the following makes my image slightly blurry as it loads, even without any scrolling.

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

And also:

 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
Community
  • 1
  • 1
Fahad
  • 1,364
  • 3
  • 20
  • 40
  • 2
    Are you aware that your logo is over two *thousand* pixels wide? – Joseph Marikle Aug 25 '16 at 20:36
  • Resizing a raster image inevitably results in some blurriness. Consider using vector graphics (SVG) instead. – Marat Tanalin Aug 25 '16 at 20:36
  • To clarify, the reason why I point that out is that the browser can only do so much to resize an image for you. It's not photoshop with four different methods of downscaling. You're rasterized image will probably look much nicer if you reupload a scaled version that's closer to the final 150px ~ 200px size. Let photoshop or other image editors figure out the scaling instead of client-side browsers. Vectors might also be a good idea too as Marat pointed out. – Joseph Marikle Aug 25 '16 at 20:42
  • @JosephMarikle I just did that after your first comment, resized it down to ~200px wide, and it scales fine now. Thanks, fixed my problem. And your explanation helps too. If you could just post the same as your answer, I'll mark it. Thanks again. – Fahad Aug 25 '16 at 20:46
  • @MaratTanalin I'll try it if I run into further issues, this fixed my problem for now. Thanks. – Fahad Aug 25 '16 at 20:48

1 Answers1

0

The browser can only do so much to resize an image for you. It's not photoshop with its four different methods of downscaling. Your rasterized image will probably look much nicer if you reupload a scaled version that's closer to the final 150px ~ 200px size (probably on the 200px side of the range). Let photoshop or other image editors figure out the scaling instead of client-side browsers. Vectors might also be a good idea too as Marat pointed out.

Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129