search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.02k stars 13.51k forks source link

ion-content scroll jump with unshift operator in ios and safari #28481

Closed Ibni-Amin closed 11 months ago

Ibni-Amin commented 11 months ago

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

I am developing chat in ionic with the help of ion-content once I open the chat screen there small data in scroll and i go down into botttom of chat ion-content, after viewDidEnter I get more data but I want to load it using unshift operator when the new, a bit time after scroll jump.

Expected Behavior

I am handling scrolling in chat through ion-content scroll. It shouldn't be jumped , remember there is no jump issue in android and chrome.

Steps to Reproduce

  1. step html `<ion-content [scrollEvents]="true" scrollDownOnLoad="true" lines="none" class="fullScreen" style="height:100% ; width: 103%; overflow: hidden; --padding-end:3%" [ngClass]="dark ? 'dark-mode' : 'light-mode'" (click)="closeAttahment()" (ionScroll)="ionicScroll($event)">

    <div *ngFor="let message of chatmessages; let i=index; trackBy: trackByFn">

    {{ message?._id + messageNumber }}

    {{ messageNumber }}
`. html

  • step

    • async ionViewDidEnter() { const offSet = (this.offSet += 15); await this.chatHistoryofUser(offSet, 100); // when view load with some initial messages after that i load more messages this.offSet = offSet + 100; }

    1. step ionicScroll($e: Event) { const detail = (<CustomEvent>$e).detail; const scrollObj: IScroll = { lastItemsCount: this.lastItems, scrollToTopCount: detail.scrollTop, TimeOut: 1500, }; this.chatService.setSrcroll(scrollObj); // call api and the below for loop execute }

    for (let i = 0; i <= res.data.messages.length - 1; ++i) { this.chatmessages.unshift(res.data.messages[i]); } ts sample

    Code Reproduction URL

    No response

    Ionic Info

    Ionic:

    Ionic CLI : 7.1.1 (/Users/....../.nvm/versions/node/v18.17.1/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 7.5.0 @angular-devkit/build-angular : 15.2.4 @angular-devkit/schematics : 15.2.10 @angular/cli : 15.2.10 @ionic/angular-toolkit : 10.0.0

    Capacitor:

    Capacitor CLI : 5.5.0 @capacitor/android : 4.6.1 @capacitor/core : 5.5.0 @capacitor/ios : 4.6.1

    Cordova:

    Cordova CLI : not installed Cordova Platforms : not available Cordova Plugins : not available

    Utility:

    cordova-res : 0.15.4 native-run (update available: 2.0.0) : 1.7.3

    System:

    NodeJS : v18.17.1 (/Users/........../.nvm/versions/node/v18.17.1/bin/node) npm : 9.6.7 OS : macOS Unknown Xcode : Xcode 14.3.1 Build version 14E300c

    Additional Information

    Anyone help will be appreciated. 😊😊

    ionitron-bot[bot] commented 11 months ago

    Thanks for the issue! This issue appears to be a support request. We use this issue tracker exclusively for bug reports and feature requests. Please use our forum for questions about the framework.

    Thank you for using Ionic!