Semantic UI & ReactJS, MeteorJS, infinite scroll not calling onBottomVisible() in visibility - meteor

Question

UPDATE #1: as per the Answer below, this works in Safari but NOT Chrome on a MacBook Pro.
UPDATE #2: This issue is reproducible without Meteor as per the JSfiddle below w/ ReactJS and Chrome. However it NEVER works with Meteor, i.e. react-packages Atmosphere package unless 1) put Chrome into dev tools mobile device mode AND add this to index.html
<meta name="viewport" content="initial-scale=1" />
Semantic UI infinite scroll in ReactJS app not calling onBottomVisible() in .visibility. onBottomVisible never get's called when scrolling to the bottom of the page.
I tried forcing a height onto <div className="myfeed"> but that only triggers the onBottomVisible() callback on load, not when scrolling to the bottom.
See the code below and these JSfiddle's:
ReactJS version: http://jsfiddle.net/2wvfjpy9/9/
Non-React version: https://jsfiddle.net/4p6d7x86/12/
CSS:
.myfeed {
height: 200px;
}
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'));

Answer 1

Remove the css and it works just fine. I've added more records so you don't get confused by the height of JSFiddle javascript window. Here edited JSFiddle.
var App = React.createClass({
componentDidMount: function() {
$('.myfeed').visibility({
once: false,
observeChanges: true,
onBottomVisible: function() {
console.log('infiniateScroll ... called.');
alert('inifiniateScroll ... called.');
}
});
},
render: function() {
var showFeedHTML = [];
for (var i=0; i < 100; 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'));

Answer 2

I got this working in Chrome on OS X, by adding offset. Only works on Chrome with a healthy offset. Value required seems to depend on how deeply the DOM element is nested.
Here's an update JSfiddle: http://jsfiddle.net/2wvfjpy9/17/
componentDidMount: function() {
$('.myfeed').visibility({
once: false,
offset: 5, // Only works on Chrome with a healthy offset.
// Value required seems to depend on how deeply
// the DOM element is nested.
// update size when new content loads
observeChanges: true,
// load content on bottom edge visible
onBottomVisible: function() {
console.log("infiniateScroll ... called.");
alert("infiniateScroll ... called.");
}
});
},