search

ionic-team / ionic-v3

The repo for Ionic 3.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
129 stars 86 forks source link

Ionic ios flickering on scroll #1140

Closed SleeplessFox closed 2 years ago

SleeplessFox commented 2 years ago

Current behavior: When I scroll within some pages of my App the single items ar flickering. It is not on all pages just some but I cant figure out what causes this behavior.

See Video: https://www.dropbox.com/s/5mou9egsndo93sq/20210623_103411_1.mp4?dl=0

On Android everything works very well!

Related code:

      <app-header title=appHeader.settings [translateText]=true isModal="true"></app-header>

      <ion-segment mode="md" scrollable [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
          <ion-segment-button mode="md" value="general">
              <ion-label>{{"settingsPage.segment_general" | translate}}</ion-label>
          </ion-segment-button>
          <ion-segment-button mode="md" value="notifications">
              <ion-label>{{"settingsPage.segment_notifications" | translate}}</ion-label>
          </ion-segment-button>
      </ion-segment>

      <ion-content forceOverscroll="false">
          <div class="content">
              <div class="app-version">Version: {{appVersion}}</div>
          <!-- GENERAL Section -->

          <ion-list *ngIf="segment === 'general'">
              <!-- <ion-list-header>
                  <ion-label>{{"settingsPage.header_label_general" | translate}}</ion-label>
              </ion-list-header> -->
              <div class="notification-header">
                  {{"settingsPage.header_label_general" | translate}}
              </div>

              <ion-item lines="none">
                  <ion-label>{{"settingsPage.form_label_language" | translate}}</ion-label>
                  <ion-icon name="language-outline" size="middle" slot="start"></ion-icon>
                  <ion-select [interfaceOptions]="languageSelectOptions" (ionChange)="changeLanguage()" [(ngModel)]="settings.general.language" [value]="settings.general.language">
                      <ion-select-option value="de">{{"settingsPage.setting_language_de" | translate}}</ion-select-option>
                      <!-- <ion-select-option value="en">{{"settingsPage.setting_language_en" | translate}}</ion-select-option> -->
                  </ion-select>
              </ion-item>
          </ion-list>

          <ion-list *ngIf="segment === 'general'">
              <!-- <ion-list-header>
                  <ion-label>{{"settingsPage.header_label_theming" | translate}}</ion-label>
              </ion-list-header> -->
              <div class="notification-header">
                  {{"settingsPage.header_label_theming" | translate}}
              </div>

              <ion-item lines="none">
                  <ion-label>{{"settingsPage.form_label_mainColor" | translate}}</ion-label>
                  <ion-icon name="color-palette-outline" size="middle" slot="start"></ion-icon>
                  <ion-select [interfaceOptions]="colorSelectOptions" (ionChange)="changeMainColor()" [(ngModel)]="mainColor" [value]="mainColor">
                      <ion-select-option value="green">{{"settingsPage.setting_theming_green" | translate}}</ion-select-option>
                      <ion-select-option value="red">{{"settingsPage.setting_theming_red" | translate}}</ion-select-option>
                      <ion-select-option value="blue">{{"settingsPage.setting_theming_blue" | translate}}</ion-select-option>
                      <ion-select-option value="yellow">{{"settingsPage.setting_theming_yellow" | translate}}</ion-select-option>
                      <ion-select-option value="purple">{{"settingsPage.setting_theming_purple" | translate}}</ion-select-option>
                  </ion-select>
              </ion-item>

              <ion-item lines="none">
                  <ion-label>{{"settingsPage.form_label_view_mode" | translate}}</ion-label>
                  <ion-icon name="contrast-outline" size="middle" slot="start"></ion-icon>
                  <ion-toggle [(ngModel)]="settings.general.darkMode" (ionChange)="changeViewMode()"></ion-toggle>
              </ion-item>

          </ion-list>

          <ion-list *ngIf="segment === 'general'">
              <div class="notification-header">
                  {{"settingsPage.header_label_videos" | translate}}
              </div>

              <ion-item lines="none">
                  <ion-label>{{"settingsPage.form_label_autoplay" | translate}}</ion-label>
                  <ion-icon name="play" size="middle" slot="start"></ion-icon>
                  <ion-toggle (ionChange)="changeAutoplayMode($event)" checked="{{settings.videos.autoplay}}"></ion-toggle>
              </ion-item>

              <ion-item lines="none">
                  <ion-label>{{"settingsPage.form_label_muted" | translate}}</ion-label>
                  <ion-icon name="volume-mute" size="middle" slot="start"></ion-icon>
                  <ion-toggle [(ngModel)]="settings.videos.muted" (ionChange)="changeMutedMode()"></ion-toggle>
              </ion-item>
          </ion-list>

          <!-- Account Connection Settings -->
          <ion-list *ngIf="segment === 'general'">
              <div class="notification-header">
                  {{"settingsPage.header_label_accounts" | translate}}
              </div>

              <div *ngFor="let accountName of appAccountsToConnect; let i = index">
                  <ion-item lines="none" id="account-connection-{{accountName}}">
                      <ion-label>{{accountName.charAt(0).toUpperCase() + accountName.slice(1)}}</ion-label>
                      <ion-icon *ngIf="accountName != 'patreon'" name="logo-{{accountName}}" size="middle" slot="start"></ion-icon>
                      <img *ngIf="accountName === 'patreon'" class='icon-small' src="./../../../assets/icon/patreon.svg" slot="start" />
                      <ion-button id="account-button-{{accountName}}-inactive" *ngIf="!this.settings.connectedAccounts[accountName]" slot="end" type="submit" class="red-btn" (click)="connectAccount(accountName,true)">
                          <ion-icon size="small" slot="start" name="add"></ion-icon>
                          <ion-label>{{"settingsPage.form_label_connect_accounts" | translate}}</ion-label>
                      </ion-button>
                      <ion-button id="account-button-{{accountName}}-active" *ngIf="this.settings.connectedAccounts[accountName]" slot="end" type="submit" class="green-btn" (click)="connectAccount(accountName,false)">
                          <ion-icon size="small" slot="start" name="close-outline"></ion-icon>
                          <ion-label>{{"settingsPage.form_label_disconnect_accounts" | translate}}</ion-label>
                      </ion-button>
                  </ion-item>
              </div>
          </ion-list>

          <!-- PUSH NOTIFICATION Section -->
          <ion-list *ngIf="segment === 'notifications'">
              <div class="notification-header">
                  News
              </div>

              <ion-item-divider>
                  <ion-label>
                      {{"settingsPage.header_label_general" | translate}}
                  </ion-label>
              </ion-item-divider>

              <div *ngFor="let notificationObject of appNotifications">
                  <div *ngIf="notificationObject.type === 'news'">
                      <div *ngFor="let notification of notificationObject.items; let j = index">
                          <ion-item lines="none">
                              <ion-label>{{notification.label}}</ion-label>
                              <ion-icon name="newspaper-outline" size="middle" slot="start"></ion-icon>
                              <ion-toggle checked="{{settings.notifications[notification.topic + '-' + envName] || false}}" (ionChange)="changeNotification($event, notificationObject.type, notification, null)"></ion-toggle>
                          </ion-item>
                      </div>
                  </div>

                  <!-- YOUTUBE Notification Settings-->
                  <div *ngIf="notificationObject.type === 'youtube'">
                      <div class="notification-header">
                          Youtube
                      </div>

                      <div *ngFor="let channel of youtubeChannels; let i = index">
                          <ion-item-divider>
                              <ion-label>
                                  {{channel.channelName}}
                              </ion-label>
                          </ion-item-divider>

                          <div *ngFor="let notification of notificationObject.items; let j = index">
                              <ion-item lines="none">
                                  <ion-label>{{notification.label}}</ion-label>
                                  <ion-icon name="logo-youtube" size="middle" slot="start"></ion-icon>
                                  <ion-toggle checked="{{settings.notifications[notification.topic + '-' + channel.formatedChannelName] || false}}" (ionChange)="changeNotification($event, notificationObject.type, notification, channel)"></ion-toggle>
                              </ion-item>
                          </div>
                      </div>
                  </div>

                  <!-- TWITCH Notification Settings -->
                  <div *ngIf="notificationObject.type === 'twitch'">
                      <div class="notification-header">
                          Twitch
                      </div>

                      <div *ngFor="let channel of twitchChannels; let i = index">
                          <ion-item-divider>
                              <ion-label>
                                  {{channel.channelName}}
                              </ion-label>
                          </ion-item-divider>

                          <div *ngFor="let notification of notificationObject.items; let j = index">
                              <ion-item lines="none">
                                  <ion-label>{{notification.label}}</ion-label>
                                  <ion-icon name="logo-twitch" size="middle" slot="start"></ion-icon>
                                  <ion-toggle checked="{{settings.notifications[notification.topic + '-' + channel.formatedChannelName] || false}}" (ionChange)="changeNotification($event, notificationObject.type, notification, channel)"></ion-toggle>
                              </ion-item>
                          </div>
                      </div>
                  </div>

                  <!-- TWITTER Notification Settings -->
                  <div *ngIf="notificationObject.type === 'twitter'">
                      <div class="notification-header">
                          Twitter
                      </div>

                      <div *ngFor="let channel of twitterChannels; let i = index">
                          <ion-item-divider>
                              <ion-label>
                                  {{channel.channelName}}
                              </ion-label>
                          </ion-item-divider>

                          <div *ngFor="let notification of notificationObject.items; let j = index">
                              <ion-item lines="none">
                                  <ion-label>{{notification.label}}</ion-label>
                                  <ion-icon name="logo-twitter" size="middle" slot="start"></ion-icon>
                                  <ion-toggle checked="{{settings.notifications[notification.topic + '-' + channel.formatedChannelName] || false }}" (ionChange)="changeNotification($event, notificationObject.type, notification, channel)"></ion-toggle>
                              </ion-item>
                          </div>
                      </div>
                  </div>

                  <!-- INSTAGRAM Notification Settings -->
                  <div *ngIf="notificationObject.type === 'instagram'">
                      <div class="notification-header">
                          Instagram
                      </div>

                      <div *ngFor="let channel of instagramChannels; let i = index">
                          <ion-item-divider>
                              <ion-label>
                                  {{channel.channelName}}
                              </ion-label>
                          </ion-item-divider>

                          <div *ngFor="let notification of notificationObject.items; let j = index">
                              <ion-item lines="none">
                                  <ion-label>{{notification.label}}</ion-label>
                                  <ion-icon name="logo-instagram" size="middle" slot="start"></ion-icon>
                                  <ion-toggle checked="{{settings.notifications[notification.topic + '-' + channel.formatedChannelName] || false }}" (ionChange)="changeNotification($event, notificationObject.type, notification, channel)"></ion-toggle>
                              </ion-item>
                          </div>
                      </div>
                  </div>

                  <div *ngIf="notificationObject.type === 'spotify'">
                      <div class="notification-header">
                          Spotify
                      </div>

                      <ion-item-divider>
                          <ion-label>
                              Start & Select
                          </ion-label>
                      </ion-item-divider>

                      <div *ngFor="let notification of notificationObject.items; let j = index">
                          <ion-item lines="none">
                              <ion-label>{{notification.label}}</ion-label>
                              <img class='icon-smaller' src="./../../../assets/icon/spotify.svg" slot="start" />
                              <ion-toggle checked="{{settings.notifications[notification.topic + '-' + envName] || false }}" (ionChange)="changeNotification($event, notificationObject.type, notification, null)"></ion-toggle>
                          </ion-item>
                      </div>
                  </div>
              </div>

              <!-- SOFTWARE-->
              <div>
                  <div class="notification-header">
                      SleeplessFox Software
                  </div>

                  <div *ngFor="let notification of foxNotifications; let j = index">
                      <div *ngIf="notification.topic === 'new-news'">
                          <ion-item-divider>
                              <ion-label>
                                  News
                              </ion-label>
                          </ion-item-divider>

                          <ion-item lines="none">
                              <ion-label>{{notification.label}}</ion-label>
                              <ion-icon name="newspaper-outline" size="middle" slot="start"></ion-icon>
                              <ion-toggle checked="{{settings.notifications[notification.topic] || false }}" (ionChange)="changeNotification($event, 'news', notification,  {formatedChannelName: 'sleeplessfoxsoftware'})"></ion-toggle>
                          </ion-item>
                      </div>

                      <div *ngIf="notification.topic != 'new-news'">
                          <ion-item-divider *ngIf="j === 1">
                              <ion-label>
                                  Twitch
                              </ion-label>
                          </ion-item-divider>

                          <ion-item lines="none">
                              <ion-label>{{notification.label}}</ion-label>
                              <ion-icon name="logo-twitch" size="middle" slot="start"></ion-icon>
                              <ion-toggle checked="{{settings.notifications[notification.topic + '-software'] || false}}" (ionChange)="changeNotification($event, 'twitch', notification, {formatedChannelName: 'software'})"></ion-toggle>
                          </ion-item>

                      </div>
                  </div>
              </div>

          </ion-list>
      </div>
  </ion-content>

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic:

Ionic CLI : 6.13.1 Ionic Framework : @ionic/angular 5.6.3 @angular-devkit/build-angular : 0.901.15 @angular-devkit/schematics : 9.1.12 @angular/cli : 9.1.15 @ionic/angular-toolkit : 2.3.3

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1) Cordova Platforms : ios 5.1.1 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 21 other plugins)

Utility:

cordova-res : 0.15.3 native-run : 1.4.0

System:

ios-deploy : 1.9.4 NodeJS : v12.22.1 (/Users/user/.nvm/versions/node/v12.22.1/bin/node) npm : 6.14.12 OS : macOS Mojave

Expected behavior: Scroll smooth without flickering.

SleeplessFox commented 2 years ago

Solved: I've found the problem.If anyone else has similar problems: I have a little animation within the header (blinking border) which causes a full rerendering of the whole page so that on scrolling the rerednering causes the flicker effect.