[IOS Web]Cannot click on flutter web app inside iframe #101251
Description
This describes a Flutter issue on Safari mobile when the web app is embedded on iframe.
Steps to Reproduce
- Create a new flutter app
$ flutter create flutter_app - Run web app on port 5000 in release mode
$ flutter run -d chrome --web-port 5000 --release - Create an HTML and embed the flutter app inside an iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Host Website</title>
</head>
<body>
<iframe id="my_iframe" src="http://localhost:5000/#/" loading="eager" frameBorder="0"></iframe>
</body>
</html>
- Provide the HTML using the Web Server for Chrome
- Open iOS Simulator (iOS 15.4) and select the iPhone 13
- Open Safari in iOS Simulator and enter on URL that the Web Server for Chrome provided
- Try to click on increment button and see that we can't click on buttons
Expected results:
I wanted to be able to click on increment button and increase the counter.
Actual results:
I can't click on button and neither increase the counter.
flutter run --verbose -d chrome --web-port 5000 --release
[ +245 ms] executing: sysctl hw.optional.arm64
[ +55 ms] Exit code 0 from: sysctl hw.optional.arm64
[ +5 ms] hw.optional.arm64: 1
[ +16 ms] executing: [/Users/diegomoraes/fvm/versions/2.10.0/] git -c log.showSignature=false log -n 1 --pretty=format:%H
[ +21 ms] Exit code 0 from: git -c log.showSignature=false log -n 1 --pretty=format:%H
[ ] 5f105a6ca7a5ac7b8bc9b241f4c2d86f4188cf5c
[ +1 ms] executing: [/Users/diegomoraes/fvm/versions/2.10.0/] git tag --points-at 5f105a6ca7a5ac7b8bc9b241f4c2d86f4188cf5c
[ +66 ms] Exit code 0 from: git tag --points-at 5f105a6ca7a5ac7b8bc9b241f4c2d86f4188cf5c
[ +1 ms] 2.10.0
[ +19 ms] executing: [/Users/diegomoraes/fvm/versions/2.10.0/] git rev-parse --abbrev-ref --symbolic @{u}
[ +14 ms] Exit code 0 from: git rev-parse --abbrev-ref --symbolic @{u}
[ ] origin/stable
[ ] executing: [/Users/diegomoraes/fvm/versions/2.10.0/] git ls-remote --get-url origin
[ +18 ms] Exit code 0 from: git ls-remote --get-url origin
[ ] https://github.com/flutter/flutter.git
[ +253 ms] executing: [/Users/diegomoraes/fvm/versions/2.10.0/] git rev-parse --abbrev-ref HEAD
[ +34 ms] Exit code 0 from: git rev-parse --abbrev-ref HEAD
[ +1 ms] stable
[ +17 ms] executing: sw_vers -productName
[ +39 ms] Exit code 0 from: sw_vers -productName
[ ] macOS
[ ] executing: sw_vers -productVersion
[ +32 ms] Exit code 0 from: sw_vers -productVersion
[ ] 12.3
[ ] executing: sw_vers -buildVersion
[ +32 ms] Exit code 0 from: sw_vers -buildVersion
[ ] 21E230
[ +146 ms] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'FlutterWebSdk' is not required, skipping update.
[ +5 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'WindowsUwpEngineArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[ +120 ms] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[ +4 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'WindowsUwpEngineArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[ ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[ +73 ms] executing: sysctl hw.optional.arm64
[ +19 ms] Exit code 0 from: sysctl hw.optional.arm64
[ +1 ms] hw.optional.arm64: 1
[ +1 ms] executing: /usr/bin/arch -arm64e xcrun xcodebuild -version
[ +221 ms] Exit code 0 from: /usr/bin/arch -arm64e xcrun xcodebuild -version
[ +1 ms] Xcode 13.3
Build version 13E113
[ +3 ms] objc[81256]: Class AppleTypeCRetimerRestoreInfoHelper is implemented in both /usr/lib/libauthinstall.dylib (0x1f44edeb0) and
/Library/Apple/System/Library/PrivateFrameworks/MobileDevice.framework/Versions/A/MobileDevice (0x105c344f8). One of the two will be used. Which one is
undefined.
objc[81256]: Class AppleTypeCRetimerFirmwareAggregateRequestCreator is implemented in both /usr/lib/libauthinstall.dylib (0x1f44edf00) and
/Library/Apple/System/Library/PrivateFrameworks/MobileDevice.framework/Versions/A/MobileDevice (0x105c34548). One of the two will be used. Which
one is undefined.
objc[81256]: Class AppleTypeCRetimerFirmwareRequestCreator is implemented in both /usr/lib/libauthinstall.dylib (0x1f44edf50) and
/Library/Apple/System/Library/PrivateFrameworks/MobileDevice.framework/Versions/A/MobileDevice (0x105c34598). One of the two will be used. Which
one is undefined.
objc[81256]: Class ATCRTRestoreInfoFTABFile is implemented in both /usr/lib/libauthinstall.dylib (0x1f44edfa0) and
/Library/Apple/System/Library/PrivateFrameworks/MobileDevice.framework/Versions/A/MobileDevice (0x105c345e8). One of the two will be used. Which
one is undefined.
objc[81256]: Class AppleTypeCRetimerFirmwareCopier is implemented in both /usr/lib/libauthinstall.dylib (0x1f44edff0) and
/Library/Apple/System/Library/PrivateFrameworks/MobileDevice.framework/Versions/A/MobileDevice (0x105c34638). One of the two will be used. Which
one is undefined.
objc[81256]: Class ATCRTRestoreInfoFTABSubfile is implemented in both /usr/lib/libauthinstall.dylib (0x1f44ee040) and
/Library/Apple/System/Library/PrivateFrameworks/MobileDevice.framework/Versions/A/MobileDevice (0x105c34688). One of the two will be used. Which
one is undefined.
[ +407 ms] Skipping pub get: version match.
[ +193 ms] Generating
/Users/diegomoraes/workspace/flutter_iframe_issue/flutter_app/android/app/src/main/java/io/flutter/plugins/GeneratedPluginRegistrant.java
[ +713 ms] Launching lib/main.dart on Chrome in release mode...
[ +379 ms] Compiling lib/main.dart for the Web...
[ +25 ms] Initializing file store
[ +13 ms] Done initializing file store
[ +198 ms] Skipping target: web_entrypoint
[ +6 ms] Skipping target: gen_localizations
[ +16 ms] Skipping target: web_static_assets
[ +659 ms] Skipping target: dart2js
[ +98 ms] Skipping target: web_release_bundle
[ +198 ms] Skipping target: web_service_worker
[ +2 ms] Persisting file store
[ +15 ms] Done persisting file store
[ +34 ms] Compiling lib/main.dart for the Web... (completed in 1,246ms)
[ +165 ms] Using Google Chrome 100.0.4896.60
[ +38 ms] executing: sysctl hw.optional.arm64
[ +27 ms] Exit code 0 from: sysctl hw.optional.arm64
[ +1 ms] hw.optional.arm64: 1
[ +30 ms] Found ARM Chrome installation at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome, forcing native launch.
[ +629 ms] [CHROME]:
[ +2 ms] [CHROME]: DevTools listening on ws://127.0.0.1:51517/devtools/browser/3381a566-ffea-44b0-a9a0-00382a8974e3
[+5647 ms] 🔥 To hot restart changes while running, press "r" or "R".
[ +8 ms] For a more detailed help message, press "h". To quit, press "q".
flutter doctor -v
[✓] Flutter (Channel stable, 2.10.0, on macOS 12.3 21E230 darwin-arm, locale en-BR)
• Flutter version 2.10.0 at /Users/diegomoraes/fvm/versions/2.10.0
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 5f105a6ca7 (9 weeks ago), 2022-02-01 14:15:42 -0800
• Engine revision 776efd2034
• Dart version 2.16.0
• DevTools version 2.9.2
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
• Android SDK at /Users/diegomoraes/Library/Android/sdk
• Platform android-31, build-tools 32.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• CocoaPods version 1.11.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.1)
• Android Studio at /Applications/Android Studio.app/Contents
• 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 11.0.11+0-b60-7772763)
[✓] VS Code (version 1.66.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.36.0
[✓] Connected device (2 available)
• SM A105M (mobile) • RX8M910F5JA • android-arm • Android 11 (API 30)
• Chrome (web) • chrome • web-javascript • Google Chrome 100.0.4896.60
[✓] HTTP Host Availability
• All required HTTP hosts are available
• No issues found!
Demo Project
Flutter IFrame Issue: https://github.com/diegomors/flutter_iframe_issue
Demo Video