Search code examples
javascriptcssmobileskrollr

Skrollr mobile browser issue

I'm trying to use skrollr to work around the issues with CSS fixed background images in mobile browsers. I've built a stripped down version of my document schema with one background image and skrollr, here: http://lkoren.github.io/2013/10/16/skrollrTest.html

The file structure is 

<body>
    <div class="doc-container" id="skrollr-body" >
        <div class="content-container" data-start="background-position: right 0px;" data-end="background-position: right 0px;">
            <div class = "info-box">
            </div>
       </div>
   </div>
<Skrollr script goes here>
</body>

On my 2013 Nexus7 skrollr has no effect on Opera and Chrome. In FireFox it tends to cause a lot of sticking and stuttering.

In desktop FireFox and Chrome it works fine. I verified it's actually doing something by setting 

data-end="background-position: right 500px;"

and getting the parallax effect.

Solution

  • Move the background-image to an element outside of #skrollr-body (e.g. body) . Because skrollr translates the #skrollr-body using CSS transforms, which moves your background as well.