Skip to content

[Bug] sensors_plus example code not receiving sensor callbacks on iOS Web (Safari & Chrome) #3755

@sanjay-mi

Description

@sanjay-mi

Platform

iOS version 18.7.2

Plugin

sensors_plus

Version

7.0.0

Flutter SDK

3.35.7

Steps to reproduce

The sensors_plus plugin is not receiving Accelerometer and Gyroscope data in the iOS Safari browser, even when the app is hosted on a secure HTTPS URL.

I have already implemented the required browser permission logic in index.html. With this setup, sensor callbacks are successfully received in JavaScript, but no callbacks are received by the sensors_plus plugin.

To rule out project-specific issues, I tested the official sensors_plus sample project under the same conditions. The issue persists there as well.

Additional observations:

  • The sample project does not include sensor permission handling by default.
  • After adding the required permission code to the sample’s index.html, sensor data is still received only in JavaScript, not through sensors_plus.
  • This confirms that the issue appears to be related to sensors_plus on iOS Web (Safari & Chrome).

Steps followed to reproduce the issue using the sample project:

  1. Check out the sensors_plus sample locally.
  2. Run the build command:
    flutter build web
  3. Run the command for a secure local server: npx http-server build/web -S -C cert.pem -K key.pem
  4. Opened the generated URL (e.g., https://:8080) in Safari on an iPhone.
    Make sure both the iPhone and the development machine were on the same network.

Sensor data is available in JavaScript logs, but sensors_plus does not emit any accelerometer or gyroscope events on iOS Web.

Image

Code Sample

Index.html with iOS browser permission
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta content="IE=Edge" http-equiv="X-UA-Compatible"/>
    <meta name="description" content="Flutter Sensors Plus example"/>

    <!-- iOS meta tags & icons -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-title" content="example"/>
    <link rel="apple-touch-icon" href="icons/Icon-192.png"/>

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="favicon.png"/>

    <title>example</title>
    <link rel="manifest" href="manifest.json"/>
</head>
<body>
<script src="main.dart.js" type="application/javascript"></script>
<script>

    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }

</script>

<button id="enableSensors"
        style="position:fixed;top:20px;left:20px;z-index:9999;">
    Enable Motion
</button>

<script>
    console.log('Safari iOS test log loaded');

    document
      .getElementById('enableSensors')
      .addEventListener('click', async () => {
        try {
          if (
            typeof DeviceMotionEvent !== 'undefined' &&
            typeof DeviceMotionEvent.requestPermission === 'function'
          ) {
            const permission = await DeviceMotionEvent.requestPermission();
            console.log('Motion permission:', permission);

            if (permission === 'granted') {
              startMotion();
            }
          } else {
            // Non-iOS or older Safari
            startMotion();
          }
        } catch (err) {
          console.error('Permission error:', err);
        }
      });

    function startMotion() {
      console.log('Starting devicemotion listener');

      window.addEventListener('devicemotion', (e) => {
        console.log(
          'acc:',
          e.accelerationIncludingGravity?.x,
          e.accelerationIncludingGravity?.y,
          e.accelerationIncludingGravity?.z,
          'gyro:',
          e.rotationRate?.alpha,
          e.rotationRate?.beta,
          e.rotationRate?.gamma
        );
      });
    }
</script>
</body>
</html>

Logs

To view logs from iPhone Safari, enable the Develop menu in Safari on macOS. Once enabled, you will see the connected iPhone listed under the Develop menu. Select the device, then click on the active URL to open the Web Inspector, where you can view the console logs.

Flutter Doctor

[✓] Flutter (Channel stable, 3.35.7, on Ubuntu 22.04.5 LTS 6.8.0-94-generic, locale en_IN) [46ms]
    • Flutter version 3.35.7 on channel stable at /home/mind/snap/flutter/common/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision adc9010625 (4 months ago), 2025-10-21 14:16:03 -0400
    • Engine revision 035316565a
    • Dart version 3.9.2
    • DevTools version 2.48.0
    • Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop, enable-android, enable-ios, cli-animations, enable-lldb-debugging

[!] Android toolchain - develop for Android devices (Android SDK version 35.0.1) [2.1s]
    • Android SDK at /home/mind/Android/Sdk
    • Emulator version 36.3.10.0 (build_id 14472402) (CL:N/A)
    • Platform android-36, build-tools 35.0.1
    • Java binary at: /home/mind/.local/share/JetBrains/Toolbox/apps/android-studio-2/jbr/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.7+-13880790-b1038.58)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

[✓] Chrome - develop for the web [16ms]
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop [687ms]
    • clang version 10.0.0-4ubuntu1
    • cmake version 3.16.3
    • ninja version 1.10.0
    • pkg-config version 0.29.1
    ! Unable to access driver information using 'eglinfo'.
      It is likely available from your distribution (e.g.: apt install mesa-utils)

[✓] Android Studio (version 2023.2) [14ms]
    • Android Studio at /home/mind/.local/share/JetBrains/Toolbox/apps/android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] Android Studio (version 2025.1.3) [13ms]
    • Android Studio at /home/mind/.local/share/JetBrains/Toolbox/apps/android-studio-2
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.7+-13880790-b1038.58)

[✓] VS Code (version 1.108.2) [13ms]
    • VS Code at /usr/share/code
    • Flutter extension version 3.128.0

[✓] Connected device (2 available) [136ms]
    • Linux (desktop) • linux  • linux-x64      • Ubuntu 22.04.5 LTS 6.8.0-94-generic
    • Chrome (web)    • chrome • web-javascript • Google Chrome 144.0.7559.132

[✓] Network resources [584ms]
    • All expected network resources are available.

! Doctor found issues in 1 category.

Checklist before submitting a bug

  • I searched issues in this repository and couldn't find such bug/problem
  • I Google'd a solution and I couldn't find it
  • I searched on StackOverflow for a solution and I couldn't find it
  • I read the README.md file of the plugin
  • I'm using the latest version of the plugin
  • All dependencies are up to date with flutter pub upgrade
  • I did a flutter clean
  • I tried running the example project

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingtriage

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions