search

vvo / in-viewport

Get a callback when any element becomes visible in a viewport (body or custom viewport)
MIT License
276 stars 24 forks source link

Can't get it to detect when element is in Viewport on mobile devices #4

Closed lmartins closed 9 years ago

lmartins commented 10 years ago

I am using this plugin in a few sites where I still didn't implemented a responsive layout. One of those site is www.idomlive.com, and I use in-viewport to animate some parts of the page, as shown here: http://www.idomlive.com/EN/platform/

The problem is in mobile it doesn't seem to be working, this is reproducible in Chrome's mobile emulation. I scroll the element in and out of the viewport and nothing happens. I've noticed that, in my iPhone, if I zoom into the elements they sometimes seem to react and trigger the inViewport callbacks, but it's quite tricky to replicate.

Im using the plugin like this:

inViewport( this.illustration01, {offset: -360}, function() {
          that.illustration01items.velocity("transition.slideRightIn", { stagger: 150, drag: true });
        });

I've tried removing the offset property but that doesn't seem to produce any effect in the mobile devices.

Any thing else I can try here?

lmartins commented 10 years ago

After further testing I believe this is related to how mobile browser calculate scroll position. Not sure if hdpi screens have any influence or not. Have you any experience in these situations that you can share?

vvo commented 10 years ago

@lmartins can you provide a failing test case or a jsfiddle page demonstrating the issue?

Thanks.