Bug with parent container of height: 100 vh or 100 %

[stefanoTron]

Hi,

In my use case I have a parent div with a height of 100 vh, this makes the animation buggy. It looks like the 'scroll' event is not fired, so on page load the animation looks good and on resize it works as well. If I remove the 100 vh, everything is back to normal. Same thing happens with 100%.

[rpocklin]

not sure what 100vh means but if you send me a plukr or code I can take a look.

[stefanoTron]

I'll setup a plnkr shortly, in the mean time check out http://www.w3.org/TR/css3-values/#viewport-relative-lengths for the viewport percentage unit.

[stefanoTron]

here you go: http://plnkr.co/edit/kRtMO3mzwKFI3YwkNFyA?p=preview

I noticed that using flexbox also seams to be part of the problem.

So to summerize:
flexbox + 100vh --> buggy
flexbox + 100% --> buggy
just 100vh without flexbox --> ok
flexbox with pixel height (say 1000px) or auto --> ok

hope this helps :)

[Ross-Rawlins]

I have given it a set height and it still doenst run the animate element function. It only runs it on load. Please help. If I resize the browser window then it picks up teh event and animates the items.

[umdstu]

I think I'm experiencing the same issue. Things seem to work fine until they are scrolled back into view, in which case they do not animate back in. Adding some log statements it's clear that when-visible function is not even firing when the elements are scrolled back into view after having been hidden. Using this bootstrap.

[rpocklin]

Haven't had time to debug this yet, but i'm expecting either the getBoundingClientRect() doesn't play nice with those CSS settings or the calculations don't work as expected in those cases.

Armed with the plunkr, i'll take a look in the next few days.

[rpocklin]

Problem appears to be the DOM not triggering 'scroll' events when. Culprit is overflow: auto with flexbox and vh (every other combination works in Chrome).

Biggest issue is it is browser specific, Chrome works one way, Safari works another. Need to investigate more to have a global solution.

[Ross-Rawlins]

Thanks for doing this fix. I would like to use it on a production app so if you find the bug in time it would be awesome.

[rpocklin]

Check out v0.9.8 and specify the bind-scroll-to documentation, this should fix it cross-browser.

[Ross-Rawlins]

I just downloaded it and its not working still...still the same thing where it doesnt update on scroll. I am using it in IONIC and with angular material with no luck,

[rpocklin]

You will need to be more specific, ie. what css styles and structure you are using. Which browsers are you using?

[Ross-Rawlins]

I am using chrome. And the height is set using 100%; no auto

[rpocklin]

Rather than me guessing your HTML structure and css classes, perhaps you can provide them and I can offer help. Plunkr is good here.

[rpocklin]

@littletower here is your plunkr, with v0.9.8 of this directive and bind-scroll-to specified, which fixes the issue. http://plnkr.co/edit/vW7oan30HIPjqpe4OOEq?p=preview

[stefanoTron]

thanks! works fine for me.

[Ross-Rawlins]

I still cant get it to work, what am I doing wrong here?

[rpocklin]

@Duovili your bind-scroll-to should be a parent element of timeline not a child element.

[Ross-Rawlins]

thanks that solved it. and thank you for being so quick to respond.

[SylTi]

I have the same problem. I use flexbox, and your solution doesn't seems to work.
My structure looks like that :
html :
`

`

Js :
` var vm = this;

vm.animateElementIn = animateElementIn;
    vm.animateElementOut = animateElementOut;

    function animateElementIn($el) {
        console.log('animeIn');
        $el.removeClass('hidden');
        $el.addClass('animated slideInLeft'); 
    };

    function animateElementOut($el) {
        console.log('animeOut');
        $el.addClass('hidden');
        $el.removeClass('animated slideInLeft');
    };`

The callbacks never get fired.
Any idea ? Thanks in advance.