Issue
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">
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: (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 ([email protected])
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.
Solution
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 (I really dont know why ios rerender the full page instead just the element with the animation) so that on scrolling the rerednering causes the flicker effect.
Answered By - Kumaro
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.