4

I'm trying to create simple parallax effect changing backround position but the movement is not smooth in iOS Safari. Background changes its position only when I release touchscreen, but not when I scroll it.

Javascript:

   $(window).bind('touchmove',function(e){  
        var scrolled = $(window).scrollTop();
        $('#home').css('backgroundPosition', 'center ' + (0-(scrolled*2)) +'px');
    });

It actually happens not only with chnaging backgroundPosition, but also with top for div element:

$('#home').css('top', (scrolled*2) +'px');

but at the same time margin-top works fine and the movement is smooth.

What am I doing wrong and how can I make it work for iOS in the same way as mousewheel event?

Raptor
  • 53,206
  • 45
  • 230
  • 366
Anton A
  • 41
  • 4

1 Answers1

1

iOS browser will freeze DOM manipulation when scrolling or a gesture happens. This cannot be fixed because it's the problem of the browser. From jQuery Mobile, it said:

Note that iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes.

Gregory Pakosz
  • 69,011
  • 20
  • 139
  • 164
Licson
  • 2,231
  • 18
  • 26