Geek Answers Handbook

Image decoding time using the Chrome Timeline dev tool

I am creating a parallax scrolling website (not all of us) that, among other things, displays an image when the user scrolls.

I did an expansion by putting the image in the background and placing a solid filled div on it. Then I will animate this div from 100% height to 0% height depending on the scroll position, thereby displaying a background image.

I do this several times, and unfortunately I am slowing down.

Using the Chrome’s built-in timeline function, I see that most of this slowdown comes from decoding images. For the above, it re-decodes the image every frame, which takes 22 ms per image per frame.

Does anyone know when a browser should do Image Decode, and when not? It seems to me that I would need it if I resized the image, but not the way I need it, when I only half-fit the image?

Thank you for your help.

+6
source share
2 answers

I also struggled a lot with this problem. So far, I have not found anything specific, and my proposed solution does not seem to work in ALL cases, and I could not figure out why.

Anyway...

It seems that when you animate a solid element over an image, chrome forces you to transcode the image.

There are two things that I have tried, and for the most part they have been successful.

  • If you add -webkit-transform : translate3d(0,0,0) to the covering element, you should find most if all image decoders do not disappear.

  • If adding the above CSS to the covering element itself does not help, try adding it to the image instead, or try adding it to both elements.

My understanding is that using the 3d css property pushes the image to its own composite layer, which is cached and processed by the GPU, not the browser viewer.

In 90% of cases, I found one of the above combinations to be successful. I hope this helps.

+3
source

How do you animate a property? I think you can have many alternatives to just animating the height (which is kind of resizing the container).

It may be less intense to simply crop the background image with another element. I found a thread about this on StackOverflow with some suggestions. If you are animating with javascript, unfortunately, pseudo-elements are not an option ...

Clip / Crop Background Image Using CSS

+1
source

More articles:


All Articles