Listener wrong values on rotation

[philliphall]

My build includes Capacitor 7, Ionic 8, Vue3. The following test result are on a virtual Pixel 6 running Android 12.

Short version: On first rotation, the safeAreaChanged listener doesn't fire. On subsequent rotations, the listener receives safe area inset values appropriate for the prior orientation. Even immediately calling getSafeAreaInsets immediately in the listening function gets previous orientation inset values. Only after waiting 2 seconds and re-calling getSafeAreaInsets do we get the correct values for the current orientation.

[AlwaysLoveme]

My build includes Capacitor 7, Ionic 8, Vue3. The following test result are on a virtual Pixel 6 running Android 12.

Short version: On first rotation, the safeAreaChanged listener doesn't fire. On subsequent rotations, the listener receives safe area inset values appropriate for the prior orientation. Even immediately calling getSafeAreaInsets immediately in the listening function gets previous orientation inset values. Only after waiting 2 seconds and re-calling getSafeAreaInsets do we get the correct values for the current orientation.

upgrade to version 4.0.3

[philliphall]

Thank you for the update - looks like a lot of new code. Unfortunately, the upgrade did not resolve the issue.

I appreciate your work, but don't feel any pressure to fix this for me - I'm just reporting results in an attempt to be helpful.

On a simulated Pixel 6 running API 31... and package-lock.json reporting "node_modules/capacitor-plugin-safe-area": {"version": "4.0.3" ...

  if (Capacitor.isNativePlatform()) {
    
    // Edge-to-Edge and status bar control
    await StatusBar.setOverlaysWebView({ overlay: true });
    await StatusBar.setBackgroundColor({ color: '#ffffff00' });
    await StatusBar.setStyle({ style: Style.Light });

    // Safe Area adjustments for old, impoperly reporting devices
    window.screen.orientation.addEventListener('change', reportOrientationChange);
    await SafeArea.unsetImmersiveNavigationBar();
    const insets = await SafeArea.getSafeAreaInsets()
    console.log(insets);
    for (const [key, value] of Object.entries(insets)) {
      document.documentElement.style.setProperty(
        `--ion-safe-area-${key}`,
        `${value}px`,
      );
    }
    await SafeArea.removeAllListeners();
    await SafeArea.addListener('safeAreaChanged', async (data) => {
      const { insets } = data;
      console.log("DEBUG SafeArea - Insets received from rotation event - ", insets);
      let newInsets = await SafeArea.getSafeAreaInsets();
      console.log("DEBUG SafeArea - Insets retrieved immediately - ", newInsets);
      await sleep(500);
      newInsets = await SafeArea.getSafeAreaInsets();
      console.log("DEBUG SafeArea - Insets retrieved 500ms later - ", newInsets);

      for (const [key, value] of Object.entries(newInsets)) {
        document.documentElement.style.setProperty(
          `--ion-safe-area-${key}`,
          `${value}px`,
        );
      }
  });

In top-up orientation, initial safe area reported:

result SafeArea.getSafeAreaInsets (#68299300) 
insets: {top: 24, left: 0, right: 0, bottom: 48}

Result of first rotation to a top-left orientation (does NOT trigger safeAreaChanged listener):

The deviceorientation events are blocked by permissions policy. See https://github.com/w3c/webappsec-permissions-policy/blob/master/features.md#sensor-features
DEBUG SafeArea - Orientation change reported.

Result of second rotation back to a top-up orientation (initially receives previous orientation's insets, only after a brief sleep can it retrieve accurate insets):

VM3:331 result SafeArea.addListener (#68299302)
DEBUG SafeArea - Insets received from rotation event -  {top: 24, left: 0, right: 48, bottom: 0}
VM3:351 native SafeArea.getSafeAreaInsets (#68299323)
VM3:331 result SafeArea.getSafeAreaInsets (#68299323)
DEBUG SafeArea - Insets retrieved immediately -  insets: {top: 24, left: 0, right: 48, bottom: 0}
DEBUG SafeArea - Orientation change reported.
VM3:351 native SafeArea.getSafeAreaInsets (#68299324)
VM3:331 result SafeArea.getSafeAreaInsets (#68299324)
DEBUG SafeArea - Insets retrieved 500ms later -  insets: {top: 24, left: 0, right: 0, bottom: 48}