3

I'm using the skrollr plugin to create a parallax web page for iOS. If I just use text, it is extremely fluid, and very fast. If I include a background image with CSS or an inline image with HTML, the scrolling suddenly becomes very choppy. Is there a fix for this? Any image slows it down considerably.

Thanks!

Caleb
  • 827
  • 2
  • 13
  • 30
  • do you animate the images or is it already slow if just added? – Prinzhorn Nov 15 '13 at 05:24
  • @Prinzhorn I animated the opacity and position (using CSS transform) – Caleb Nov 15 '13 at 12:36
  • 2
    Have you tried it on an actual device? – Steve Sahayadarlin Apr 21 '14 at 21:11
  • 1
    How big are the images you're using? Big images will slow you down considerably when they load in (especially on mobile devices, I've found) – Meg Apr 22 '14 at 20:08
  • i worked with skrollr we have done this page http://www.pipeaporter.com/pipe-a-porter-people it works good on device even with "big" image (not in kb) Have you an example to show us? – Emanuele Parisio Apr 24 '14 at 10:52
  • with the CSS background image you will find setting `background-attachment:fixed;` helps. – advert2013 Apr 24 '14 at 15:18
  • `-webkit-transform: translate3d(0,0,0);` to enable hardware acceleration? Maybe [this SO thread](http://stackoverflow.com/questions/18529381/what-does-webkit-transform-translate3d0-0-0-exactly-do-apply-to-body) has an answer for your problem. – Mandy Schoep Apr 24 '14 at 20:34

1 Answers1

0

Depending on your background image size, css background images can impose a high cost on the rendering of any page. This is variable but the more area you cover with a background the higher the cost - as the render engine for the browser needs to repaint larger parts of the screen. You can see this in action if you use Chrome and use the developer tools and the timeline tools.

A fix for your specific case of animating the images maybe to do a 3d CSS transform. IE don't do a normal transform but a 3d transform such as 'translate3d'. This will automatically trigger hardware rendering (ie your computers gpu will handle the transform) and offload some of the overhead from your cpu - and in theory make your animation much smoother.

This comes at a cost of course, especially if your dealing with mobile or other limited platforms. But its worth a shot.

Jesse
  • 386
  • 2
  • 8