Ionic Cordova ios 在滚动条上闪烁

Question

当前行为：

当我在我的应用程序的某些页面中滚动时，单个项目闪烁。它不是在所有页面上都只是一些，但我无法弄清楚是什么导致了这种行为。

观看视频： https://www.dropbox.com/s/5mou9egsndo93sq/20210623_103411_1.mp4?dl=0

在 Android 上一切正常！

相关代码：

      <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">
                      Software
                  </div>
  
                  <div *ngFor="let notification of sleeplessFoxNotifications; let j = index">
                      <div *ngIf="notification.topic === 'sleeplessfox-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: 'software'})"></ion-toggle>
                          </ion-item>
                      </div>
  
                      <div *ngIf="notification.topic != 'sleeplessfox-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 + '-sleeplessfoxsoftware'] || false}}" (ionChange)="changeNotification($event, 'twitch', notification, {formatedChannelName: 'sleeplessfoxsoftware'})"></ion-toggle>
                          </ion-item>
  
                      </div>
                  </div>
              </div>
  
          </ion-list>
      </div>
  </ion-content>

离子信息：（运行 ionic info 来自 terminal/cmd 提示并粘贴下面的输出）：

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

预期行为： 滚动流畅无闪烁。

Answer 1

已解决：我发现 problem.If 其他人也有类似的问题：我在页眉中有一个小动画（闪烁的边框）导致整个页面的完全重新渲染（我真的不知道为什么 ios 重新渲染整个页面而不只是带有动画的元素）以便在滚动时重新渲染导致闪烁效果。

Ionic Cordova ios 在滚动条上闪烁

Ionic Cordova ios flickering on scroll

angular

cordova

ionic-framework

ionic4