[Visibility] (for infinite scroll) not working with ReactJS in Chrome, on MacBook. Works in Safari.

[giantelk]

visibility (for infinite scroll) is not working in Chrome, on MacBook. Works in Safari. Details of the issue are at this StackOverflow question. Here's a JSfiddle. Try it in Chrome, it only works sometimes, very rarely though in the JSfiddle. In my ReactJS app it only works on 1st page load, since the DIV isn't populated yet from the DB it's bottom is visible. But once the DIV is populated onBottomVisible() never fires.

http://stackoverflow.com/questions/31900202/semantic-ui-reactjs-infinite-scroll-not-calling-onbottomvisible-in-visibilit/31901172?noredirect=1#comment51717923_31901172

JSfiddle: http://jsfiddle.net/2wvfjpy9/9/

ReactJS / JavaScript:

var App = React.createClass({

    componentDidMount: function() {
        $('.myfeed').visibility({
            once: false,

            // update size when new content loads
            observeChanges: true,

            // load content on bottom edge visible
            onBottomVisible: function() {
                console.log("infiniateScroll ... called.");    
                alert("infiniateScroll ... called.");    
          }
        });
    },

    render: function() {

        var showFeedHTML = [];
        for (var i=0; i < 20; i++) {
            showFeedHTML[i] = (
                <li key={ i }>
                    { i }: stuff
                </li>
            );
        }

        return (
            <div className="myfeed">
                <h3>Semantic UI & ReactJS: Infinite Scroll Example</h3>
                { showFeedHTML }
            </div>    
            );
    }
});


React.render(<App />, document.getElementById('container'));

[giantelk]

I narrowed this down to an issue using MeteorJS with react-packages. Bug description is below and a repo here:
https://github.com/giantelk/react-meteor-infinite-scroll-semantic-ui

##Semantic UI Infinite scroller 'visibility' bug with Meteor & React-Packages and Chrome desktop browser.

• There is a bug when using react-packages with MeteorJS and Semantic UI for infinite scroll. onBottomVisible() never fires.
• The bug occurs in Chrome (I'm using a MacBook) Version 44.0.2403.130 (64-bit).
• This works fine in Safari Version 7.1.7 (9537.85.16.12).

Also, this works fine in a ReactJS app in Chrome without Meteor, it's only when you use react-packages that this occurs. It also works with Meteor in Safari.

So far I've got it 1/2 working in Chrome (but only if do this):

1. Add this to index.html:
   <meta name="viewport" content="initial-scale=1" />
2. In Chrome Developer Tools turn on mobile device mode i.e. Toggle device mode.
3. Refresh the browser window, now scrolling down will fire onBottomVisible().

I haven't figured out if there's a meta tag that will fix this when NOT in mobile browser emulation mode. i.e. on regular desktop.

[giantelk]

Since this is specific to MeteorJS I entered an issue here:
meteor/react-packages#84

[jlukic]

You may also consider trying $('.myfeed').visibility('refresh') on componentDidUpdate.

Mutation observers do observe changes in DOM, but do not capture changes in layout caused by other things (images without a set width/height for example).

[giantelk]

This issue still occurs even when adding:

componentDidUpdate: function() {
    $('.myfeed').visibility('refresh')
},

Still not firing onBottomVisible()

[giantelk]

@jlukic I got it working by adding offset: 2, any value >= 2 works. But offset: 1 doesn't. Strange huh? Google Chrome stealing a row of pixels from every web page?

componentDidMount: function() {
    $('.myfeed').visibility({
        once: false,
        offset: 2, // Only works in Chrome on OS X if offset >= 2.

        // update size when new content loads
        observeChanges: true,

        // load content on bottom edge visible
        onBottomVisible: function() {
            console.log("infiniateScroll ... called.");
            alert('inifiniateScroll ... called.');
        }
    });
},

[giantelk]

I have another app where my infinite scrolling div is inside a Semantic UI pusher, for a side menu, rendered via React-Router, here I need to set offset > 2 to get it working. It's still whack that I don't have to do this on Safari. Either way I was planning on using an offset anyway for my use case.

[jlukic]

see #2777 as well. w/r/t this specifically being an issue for bottomVisible this might be amplified by jquery/jquery#1724

[4rterius]

I know that it's been 2 years since the issue was closed, but I still reply in case someone else would need it, just like I did.

First of all, the bug is still alive. In some cases, with some HTML structure and CSS styles, onBottomVisible just doesn't fire, or fires only once (with the first load) and fails to do so later.

I am using not ReactJS, but Vue.js in Electron.
At first, I had used the basic infinite scroll logic from the example in Docs, and it worked like charm. But then I drastically changed the page structure (to adapt it to sidebar logic), and infinite scroll failed to work as required. onBottomVisible fired only once.

Trying to reverse the changes didn't help, so I began searching for an answer. Setting the offset or changing any other settings, turning height CSS styles off didn't help either. After a quick scroll through semantic.js, I found out that the thing that prevented obBottomVisible from being triggered was, in fact, one line of code.

Line in Visibility behaviour definition

Line in semantic.js in dist folder

For me, the quick fix was to remove && !element.topPassed from that line, so that it looked like following:

element.bottomVisible = (screen.bottom >= element.bottom);

I have yet to test it on more sophisticated examples, but now my infinite scroll works. I am sure that this change causes some issues in other cases, but for basic infinite scroll logic it works.

Hope this helps.

[Tsourdox]

I'm aslo having this issue, using react. After second render it stops firing the event.

[4rterius]

Well, in case the problem is still actual:
Using flexbox might also be an issue. It completely breaks most js scroll manipulations, such as this, it seems.
At least, when I rewrote one of the UI frameworks I was using from flexbox to more primitive CSS, it started to work without any fixes.

[coder8keyboard]

Has anyone found a solid fix for this that works on all browsers?