Why does the iOS content go up when a element is added? - ios

Question

I'm using Ionic to build a chat app, but I'm facing a problem, when I run my app on the iOS environment, every time a new message is added to the content the content goes up without any reason.
I've tried everything but I still didn't find a way to fix it, note that this bug only appears with the iOS content but works perfectly on Android.
I've published a video to show this bug
here is the code that I'm using to update the messages
ngOnInit() {
this.chatID = this.route.snapshot.paramMap.get('id');
this.afs
.collection(`chat/${this.chatID}/messages`,(ref) => ref.orderBy('createdAt'))
.valueChanges({ idField: 'id' })
.subscribe((event) => {
this.data = event;
console.log(this.data);
});
}
This is the function to push the new message
addChatMessage() {
const { newMsg } = this;
this.chatID = this.route.snapshot.paramMap.get('id');
this.afs
.collection(`chat/${this.chatID}/messages`)
.add({
msg: newMsg,
profilePic: this.profilePic,
username: this.username,
from: this.user.getUID(),
createdAt: firebase.firestore.FieldValue.serverTimestamp(),
})
this.newMsg = '';
}
And here is the HTML code
<div *ngFor="let message of data">
<div style="display: flex; justify-content: flex-end">
<div style=" display: flex;
flex-direction: column;
align-items: flex-end;
">
<ion-card class="my-message"
*ngIf="message.username == username">
<ion-label>
{{ message.msg }}
<br />
</ion-label>
</ion-card>
</div>
</div>