Strange !doctype bug with parallax plugin 'skrollr'

StackOverflow https://stackoverflow.com/questions/17860311

  •  04-06-2022
  •  | 
  •  

Question

Ok, so this has been causing me much pain and grief over the past two days and I finally narrowed the problem down but am in no way close to solving it.

I am building a parallax website using the Skrollr plugin. The plugin will cease to function in my document as soon as there is a <!doctype html> present.

I have created a new simple example and it's still producing the same bug.

The strange thing is that on their own website they are declaring the same <!doctype html> as I am but it works there.

My Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>

    .section1{
        height:1000px;
        background:gray;
    }

    .section1 img {
        width:2000px;
        height:1000px;
    }

    .section2{
        width:2000px;
        height:1000px;
        background:url('background2.jpg');
        position: absolute;
    }

    .section3{
        width:2000px;
        height:1000px;
        background:url('background3.jpg');
    }

</style>
</head>
<body>

<section class="section1">
    <div style="position:absolute; background:url('background1.jpg') no-repeat; width:100%; height:1000px; background-size:cover;" data-0="top:0;" data-1200="top:350px;"></div>
</section>
<section class="section2"></section>
<section class="section3"></section>

<script src="skrollr.min.js"></script>
<script>
    var s = skrollr.init({
            edgeStrategy: 'set',
            easing: {
                WTF: Math.random,
                inverted: function(p) {
                    return 1-p;
                }
            }
        });
</script>

</body>
</html>
Was it helpful?

Solution

You didn't specify a unit for the value of the top property of the first keyframe.

Yours: data-0="top:0;" Correct: data-0="top:0px;"

When omitting the DOCTYPE, the browser becomes less strict and assumes you mean pixels when you set top to 100 or similar.

See also: https://github.com/Prinzhorn/skrollr#limitations

All numeric values have to have the same unit. It's not possible to animate from 0% to 100px. skrollr won't complain, but results are undefined.

OTHER TIPS

I cannot comment, but I have a question. Can you post some HTML with your CSS and JS so we can get a better look.

As a note, something IS different from your code to theirs, if it was not, then logically, yours should work.

Did you check your CSS/JS against theirs and make sure something was not messed up?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top