Meteor Template, new element on top scrolls up on ios simulator but not on web

Hi all

Recently I’ve been trying to make a chat room sort of app, and i’m having some problem with infinite scrolling bottom up.

What I do basically is:

  1. I load all the messages of a message group and keep it in local DB, but initially only show 30 messages. This value(30) is stored as a reactive variable.

The helper function is:

messages: function(){
var messages = Messages.find({‘group’: Router.current().params.id}).fetch();
return messages.slice(-template.numMsgs.get());
}

  1. When I scroll I detect where the first message is, and if its position is over a certain value, I add another 30 to the reactive variable(numMsgs), and the helper above will add another 30 messages on top of the existing ones.

But the odd thing is that, while on web and android the added 30 messages won’t cause the page to go all the way up, on ios simulator it does, I can’t seem to change this behaviour even with the over flow scroll disabled.

Can someone help me with this problem? Thanks in advance for all your help!

Just confirmed that this is the case on iphonex as well, it just goes all the way up when new messages are added on top of existing ones, unlike on android and web.