After the latest updates earlier this year my ion-icon elements have been behaving strangely. What I mean is that when I open a component using the modalController the icons appear either misplaced or with wrong sizes. They are still interactable in exactly the same place if they weren’t misplaced and the moment I click somewhere that is interactable (a button, a list etc) then the icons return to their place. I’m using ionic 5.6.7 and the icons use font-size: (pixels)px (example font-size: 30px) for their sizing.
Things I have tried.
- Tried using ChangeDetectorRef to detectChanges()
- Tried selecting the icons qith querySelector and focreUpdate them
- Tried using the default ionic icons using name instead of my custom icons using src
- Tried using width/height instead of font-size
- Tried dispatching a resize event
- Tried delaying the presentation of the modal by 2000ms just to be sure
All of the above failed to fix the issue. The project is quite large and I’m trying to avoid migrating to later versions of ionic since in a project with later version the issue does not appear. Is migration the only option left or have I not tried everything ?
EDIT: Current work-around
/* Critical fixes for Ionic icon rendering /
ion-icon {
contain: none !important; / Overrides Ionic’s default containment /
opacity: 0.999; / Forces GPU layer creation /
will-change: transform; / Prevents rendering bugs */
}
on the global.scss file