Repository navigation
bug: using switch/ngIf causes label to flicker #22541
Description
Bug Report
Ionic version:
[ ] 4.x
[x] 5.x
Current behavior:
When switching between multiple ion-item components with a stacked label they cause an ugly flicker. It seems like the label is first rendered in the default position and then it switches to the stacked position.
This was the way I noticed the bug - it probably also happens in a lot of other situations where an ion-item with a stacked label is rendered.
Example gif:
Expected behavior:
No flicker :)
Steps to reproduce:
- Clone example repo
- npm i
- ionic s
- On Tab 1 use the segments to switch between the ion-items with stacked labels
Related code:
Github app: stacked-label-flicker
Other information:
- Happens in md and ios mode
- Happens with Angular 10 and 11
- Happens when running on a device and also when running the browser
- Happens with @ionic/angular 5.0.0 and also 5.5.0
Ionic info:
Ionic:
Ionic CLI : 5.2.4 (C:\Users\dstrauss.VENTO\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 5.5.0
@angular-devkit/build-angular : 0.1100.2 |
@angular-devkit/schematics : 10.0.8
@angular/cli : 11.0.2 | 36
@ionic/angular-toolkit : 2.3.3
|
Utility:
-module | 12
cordova-res : 0.15.1
native-run : 0.2.8
System:
NodeJS : v14.3.0 (C:\Program Files\nodejs\node.exe)
npm : 6.14.5
OS : Windows 10
Activity
[-]bug: stacked labes flicker during rendering[/-][+]bug: stacked labels flicker during rendering[/+][-]bug: stacked labels flicker during rendering[/-][+]bug: using switch/ngIf causes label to flicker[/+]DavidStrausz commentedon Jan 25, 2021
FYI: The behaviour is still observable with ionic 5.5.2 and angular 11.1.0.
Chreggii commentedon Apr 8, 2021
Any updates regarding this issue?
sean-perkins commentedon Dec 1, 2021
Follow-up on this issue.
The problem is that
ion-itemdoes not know to apply the.item-label-stackedclass until afterion-labelrenders and emitsionStyle. This causes a render cycle to complete with the incorrect styles, before applying the correct class.In the interim, you can help
ion-itemrender correctly by directly applying the class to the element when you know its contents contains a stacked label.DavidStrausz commentedon Dec 2, 2021
Thank you @sean-perkins! The suggested workaround works perfectly for now!
liamdebeasi commentedon Feb 3, 2023
Thanks for the report. In Ionic 7 we are introducing a new syntax for working with ion-input. Additionally, Ionic 7 has a performance improvement for Ionic Angular that should reduce the initialization time for Ionic components. This issue is fixed when using the improvements in Ionic 7. Please see https://ionic.io/blog/announcing-the-ionic-7-beta for more on Ionic 7 as well as how to get started with the Ionic 7 beta.
The work required to resolve this has been completed, so I am going to close this thread. Let me know if there are any questions.
ionitron-bot commentedon Mar 5, 2023
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.