iOS 18.6.2: Severe Performance Regression with Modal setAttribute('data-theme')

Ionic Framework Ionic Angular
1

Environment

  • Ionic Framework: 7.8.6

  • Angular: 17.3.12

  • Platform: iOS 18.6.2 (physical devices)

  • Issue: Modal opening delay increased from ~1 second to 24+ seconds

Problem Description

Hi, since iOS 18.6.2 (and iOS 26), our Angular/Ionic app experiences severe performance degradation when manipulating data-theme attributes on modal elements. The modal opening time has increased dramatically:

  • Before iOS 18: Modal opens in ~1 second

  • iOS 18.6.2: Modal takes 24 seconds to open with setAttribute('data-theme')

Problematic Code Pattern

Original Code (24 second delay)

ionViewWillEnter() {
    const page = document.querySelector('ion-modal product');
    page?.parentElement?.setAttribute('data-theme', this.appIdTheme);
}

Attempted Solutions (All Failed)

1. Different Timing Approaches

  • Moving to ionViewDidEnter(): Still 24 seconds

  • Using requestAnimationFrame() only: Still 24 seconds

  • Various timeout values (50ms, 100ms, 200ms, 300ms): No improvement

  • Double requestAnimationFrame(): Made it worse (+2 seconds)

2. Alternative DOM Manipulation Methods

  • element.dataset.theme = value: Still 24 seconds

  • setAttributeNS(): Still 24 seconds

  • Direct property assignment: Still 24 seconds

  • Batch DOM operations: Still 24 seconds

Partial Workaround Found

Moving the setAttribute operation from the modal component to the modal creation (before modal.present()) reduces the delay:

In OverlayService - Before modal.present()

// In makeShowOverlay method, after modalCtrl.create() but before present()
if (themeMode) {
    (modal as any).setAttribute('data-theme', themeMode);
}

await modal.present().then(() => {
    // rest of logic
});

Result: Delay reduced from 24 seconds to ~11 seconds

Performance Analysis

Method Location iOS 18.6.2 Delay
Original Component ionViewWillEnter 24 seconds
setAttribute OverlayService before present() 11 seconds
dataset.theme OverlayService before present() 11 seconds
Any manipulation After present() 24+ seconds

Observations

  1. Any data-theme manipulation in the modal component causes 24 second delay
  2. Moving the same operation to OverlayService reduces delay by ~50%
  3. The issue appears specific to iOS 18.6.2 - no reports from iOS 17 or earlier
  4. Using alternative CSS approaches isn’t feasible due to extensive existing codebase
  5. modal.el is not available between create() and present()

Additional Context

The app uses a complex theming system with data-theme attributes that cannot be easily refactored to CSS classes. Any insights or similar experiences from the community would be greatly appreciated.

Reproduction Steps

  1. Create Angular 17+ & Ionic 7 app

  2. Create modal with theme switching via setAttribute('data-theme')

  3. Test on iOS 18.6.2 physical device

  4. Observe 24-second delay when setAttribute is called in component lifecycle

  5. Move setAttribute to OverlayService before present() - observe reduction to 11 seconds

Questions

  1. Is this a known iOS 18 regression with Ionic modals and setAttribute operations?

  2. Are there any Ionic-specific optimizations for theme/attribute manipulation on modals?

  3. Is there a better way to apply themes to modals without DOM manipulation after rendering?