relative-mode and containers with 100% height not working

rubaff commented 11 years ago

Hi Prinzhorn,

first of all thanks for your great work on the project!

Unfortunately skrollr doesn't seem to work with containers of 100% height. As soon as I delete the height-value, everything is working fine. Here's my full code. I'd like to animate the background images later on (deck-of-cards style with position fixed, etc.).

Is there something I'm getting wrong?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Skrollr Test</title>
<style type="text/css">
    html,
    body,
    section {
    margin: 0;
    padding: 0;
    height: 100%;
    }
    /* Sections */
    section#container1 {
    background: #FC0;
    }
    section#container2 {
    background: #9F0;
    }
    section#container3 {
    background: #3CC;
    }
</style>
</head>
<body>
<section id="container1">
    <div>Text 1</div>
</section>
<section id="container2" data-top="background:rgba(255, 0, 0, 0);" data-top-bottom="background:rgba(255, 0, 0, 1);">
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</section>

<section id="container3">
    <div>Text 3</div>
</section>

<script type="text/javascript" src="dist/skrollr.min.js"></script>
<script type="text/javascript">
    var s = skrollr.init();
</script>

</body>
</html>

Prinzhorn commented 11 years ago

Took me a second to find out: skrollr sets the body height to auto for a moment to do some calculations.

Use

height: 100% !important;

I'll keep this open, maybe we should instead set it to an empty string at this line: https://github.com/Prinzhorn/skrollr/blob/master/src/skrollr.js#L634

rubaff commented 11 years ago

Perfect, thanks a lot for the quick response! Danke!

acairns commented 10 years ago

Thank you for posting this bug and many thanks for posting a fix - has just saved me a lot of work.

hrobertson commented 10 years ago

This bug had me stuck for a while before I set up a really simple test and even that didn't work - then I realised it must be a bug in skrollr and after searching the readme, I came searching here.

I strongly suggest you mention this prominently in the README. Who knows how many people are just ditching skrollr because it's not working? This seems like something the vast majority of users will run into.

Even this simple test case using data-start and data-end does not work:

<body>
    <div style="height:4000px;" data-start="background:rgb(255,0,0);" data-end="background:rgb(0,255,0);"></div>
    <script type="text/javascript" src="js/skrollr.min.js"></script>
    <script type="text/javascript">
        var s = skrollr.init();
    </script>
</body>

Setting body height: 100% !important; fixes it.

Prinzhorn commented 10 years ago

@hrobertson your example works as expected in Firefox and Chrome. What do you experience? Maybe that's a different bug.

Prinzhorn commented 10 years ago

Reading the original question again, I'm not even sure it's a bug. If you don't want skrollr to mess with the body height, then set forceHeight to false.

hrobertson commented 10 years ago

I had <html> not <!DOCTYPE html>. Changing to the latter fixed it.

leecolarelli commented 10 years ago

@Prinzhorn Are you sure it's not a bug? I've been trying to fix an issue where I'm using 100% height html, body, containers etc but the body height is being set to something like 5000px for ages.

Checked all my css multiple times, tried different things, nothing worked. Turns out if I just turn skrollr off everything works as it should do.

So I googled it and ended up here. Tried setting body height: 100% !important; and everything works fine with skrollr turned back on!

This should definitely be fixed or prominent in the readme!

Prinzhorn commented 10 years ago

This should definitely be fixed or prominent in the readme!

People don't read it anyway and if you put all the important things in it, then you have everything in it, which is already the case.

If you google for "skrollr body height" the first two results yield the correct solution, namely setting "forceHeight" to false, as I mentioned above.

leecolarelli commented 10 years ago

Thanks for the reply. With forceheight set to false the animations did not work at the correct time. There was a VERY large amount of whitespace added to the page before using body height 100% !important, and whilst forceheight made it display correctly, the animations happened off the page somewhere. It didn't work.

body height 100% !important worked.

Prinzhorn commented 10 years ago

body height 100% !important worked.

With forceHeight set to false there is no difference between height:100% and height:100% !important

leecolarelli commented 10 years ago

With forceHeight set to false there is no difference between height:100% and height:100% !important

Sorry, you are of course correct. I could not reproduce the errors I spoke about! Now just using forceHeight. Thanks.

Prinzhorn / skrollr

relative-mode and containers with 100% height not working #347