Repository navigation
Web: Flutter does not fill out entire screen in landscape on iOS Safari iPhone XS Max #71278
Description
I am running a Flutter web app in a browser on an iOS 13.7 Safari browser on an iPhone XS Max .
When I turn the phone into Landscape orientation, the top widget does not fill out the entire browser window, but leaves empty stripes on the left and right sides. Here is a photo, where the top widget is just an empty blue container:
I am using the following flutter version:
Flutter (Channel beta, 1.24.0-10.2.pre, on Mac OS X 10.15.7 19H2 darwin-x64,
locale en-GB)
• Flutter version 1.24.0-10.2.pre at /Users/stevenobua/flutter
• Framework revision 022b333 (8 days ago), 2020-11-18 11:35:09 -0800
• Engine revision 07c1eed46b
• Dart version 2.12.0 (build 2.12.0-29.10.beta)
And the code is just that:
// @dart=2.9
import 'package:flutter/material.dart';
class TestApp extends StatelessWidget {
Widget build(BuildContext context) {
return Container(color: Colors.blue);
}
}
void main() {
runApp(TestApp());
}
Reacted by Tomas Baran, Peer, ARAVINTHAN SUBRAMANIAN, DamonChen117, Paul Schunck, via-guy, Cardin Menkemeller, ZdenekKrcal, Tom Sabala, Justin Enerio and 15 more
Activity
darshankawar commentedon Nov 27, 2020
@phlegmaticprogrammer
Can you elaborate on how are you running the web app on iphone browser ?
phlegmaticprogrammer commentedon Nov 27, 2020
I am serving the web app from a server embedded in my iPad App. But I tried it now also via running
python3 -m http.server --cgi 8080from the build/web directory (on macOS Catalina), and I get exactly the same phenomenon.phlegmaticprogrammer commentedon Nov 27, 2020
I just tested it with Firefox on the phone, same behaviour. With Chrome on the phone, the behaviour is the worst: In landscape it stretches all the way from left to right, but this time the bottom part of the screen is empty. On refresh, the right part only is empty. On turning it to portrait, now long empty stripes left and right appear.
Accessing the web app not from the iPhone XS max, but from an iPad, I don't have any problems like that using Safari. Accessing the web app from an iPhone 7 is also without problems using Safari. I guess it is somehow iPhone notch related?
amanpreetsingh-BE commentedon Nov 29, 2020
@phlegmaticprogrammer
Did you find a solution ? I have the exact same problem for flutter web.
phlegmaticprogrammer commentedon Nov 29, 2020
@0xamps
no, I think this is just a bug that needs to be fixed in Flutter. But let me know if you find a solution / workaround, I would be interested in that as well!
darshankawar commentedon Nov 30, 2020
Adding steps to replicate for reference:
flutter doctor -v
29 remaining items
yjbanov commentedon Feb 15, 2024
We're drowning in flutter triage bot traffic. Resetting the triage bot timer.
yjbanov commentedon Feb 15, 2024
nvm, this one's not from the bot, sorry.
huycozy commentedon Apr 12, 2024
The issue persists on the latest Flutter stable and master channels. Reproduced this on iPhone XS Max (has Notch) and iPhone 15 (has Dynamic Island) whilst it doesn't happen on iPhone 7 (no cutout area)
Demo
flutter doctor -v (stable and master)
[✓] Flutter (Channel stable, 3.19.5, on macOS 14.1 23B74 darwin-x64, locale en-VN) • Flutter version 3.19.5 on channel stable at /Users/huynq/Documents/GitHub/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 300451adae (8 days ago), 2024-03-27 21:54:07 -0500 • Engine revision e76c956498 • Dart version 3.3.3 • DevTools version 2.31.1 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.2) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 15C500b • CocoaPods version 1.15.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.2) • 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 • android-studio-dir = /Applications/Android Studio.app/ • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874) [✓] VS Code (version 1.87.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.84.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-x64 • macOS 14.1 23B74 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 123.0.6312.106 [✓] Network resources • All expected network resources are available. • No issues found!CleanCodix commentedon Feb 3, 2026
2026 still there.
benji-farquhar commentedon Mar 26, 2026
On iPhone Chrome in landscape mode, I have left and right white edges like the image in the original issue description. On iPhone Safari, i have gotten rid of the landscape white edges, but I have portrait top and bottom white edges 😂
CleanCodix commentedon Mar 26, 2026
I figured out to fix this by adding
viewport-fit=coverto the content of the<meta name="viewport" .../>tag within the ./web/index.html file.However it seems Flutter override it at runtime on launch.
To bypass it I've added:
Before the
runApp(...)call in my main.dart file.diegolopezrm commentedon Sep 25, 2026
This should be fixed on master by #191647, which landed on September 23.
The white stripes come from the browser keeping the page out of the safe areas, and the reason adding
viewport-fit=covertoindex.htmlnever helped is that the engine used to rewrite the viewport tag and drop it. It now keeps it, and the safe-area insets flow intoMediaQuery.padding, soSafeAreacan keep your content away from the cutout while the app itself covers the whole screen.I tried it in the iOS 26.1 simulator (iPhone 17 Pro, Safari, landscape) with a fresh project from master and
viewport-fit=coverin the viewport tag: the app fills the screen, including the sides under the Dynamic Island, andMediaQuery.paddingOfreports left 62, right 62, bottom 20. That is the simulator, not a phone, so a confirmation from someone on a real device would be welcome.Two things to keep in mind: you still have to opt in by adding
viewport-fit=coverto your viewport tag (theflutter createtemplate now includes a commented-out example explaining it), and the fix is on master, so it will reach stable with the next release.