8

I'm building a parallax scrolling website (aren't we all) that amongst other things, reveals an image as the user scrolls.

I've done the 'reveal' by putting the image in the background, and placing a solid filled div on top. I then animate this div from 100% height to 0% height based on the scroll position, thus revealing the background image.

I'm doing this kind of thing multiple times and unfortunately I'm getting slow down.

Using Chrome's built in Timeline feature, I can see that most of this slow down is from Image Decodes. For the above reveal, it's re-Decoding the image every frame, which takes 22ms per image per frame.

Does anyone know when the browser needs to do Image Decode and when it doesn't? It seems obviously to me that it would need to if I resized the image, but not that it would need to when I just half cover the image?

Thanks for your help.

Jamie G
  • 1,653
  • 3
  • 20
  • 43

2 Answers2

3

I've battled with this problem a lot also. As yet I have not found anything concrete and my proposed solution does not seem to work in ALL cases and I have not been able to ascertain why.

Anyway...

It appears that when you animate a solid element over the top of an image, chrome forces a recode of the image.

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

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

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

My understanding is that using the 3d css property pushing the image into its own composite layer which is cached and handled by the GPU rather than the browsers software renderer.

90% of the time I have found one of the above combinations successful. I hope it helps.

gordyr
  • 6,078
  • 14
  • 65
  • 123
  • Hi Gordyr, thanks for the response. I do remember trying the webkit-transforms to get the GPU taking the strain, but I don't think this solved my problems in the end - it might have been because the initialisation time was causing more headaches, but to be honest, I can't quite remember why it didn't work. In the end I got it working pretty well using various different methods for different items. Here it is in action: http://www.patentise.com/ – Jamie G Jun 20 '13 at 12:43
  • Glad to hear you got it sorted :-) It looks and works great by the way. – gordyr Jun 20 '13 at 13:31
1

How do you animate the property? I think you may have plenty of alternatives to just animating the height (which is some sort of resize of the container).

Maybe it's less intensive to just 'clip' the background image with another element. I found a thread about it on StackOverflow with some suggestions. If you animate with javascript, unfortunately pseudo elements are no option...

Clip/Crop background-image with CSS

Community
  • 1
  • 1
nirazul
  • 3,928
  • 4
  • 26
  • 46
  • Hi Nirazul, I animate the height of the covering div with javascript. I'll see if the clip method works any differently and let you know. – Jamie G Apr 10 '13 at 09:18
  • Many thanks Nirazul, I've found that using clipping to hide images is a far more efficient way than display:none, or moving the image off the screen, or moving the image mostly off the screen - since doing this I'm getting far less Image Decodes being triggered in Chrome. However, I haven't marked this question as answered as the real SO question was: "Does anyone know when the browser needs to do Image Decode and when it doesn't?" but your answer was very helpful so thank you. – Jamie G Apr 10 '13 at 17:03