Steps to reproduce
flutter create safari_test (Flutter 3.41.9, engine 42d3d75)- Replace
lib/main.dart with a minimal Scaffold > Center > SingleChildScrollView > ConstrainedBox(maxWidth: 440) > Column containing a FlutterLogo, a Text headline, eight Cards, and an ElevatedButton (full source below).
flutter build web --release --no-web-resources-cdn- Serve and open in Safari 26.5 / WebKit 21625.1.13.19.1 on macOS 26.5 (25F5053d).
Live reproduction (canvaskit, default config):
https://alancook.github.io/patient-manager/safari-test/
Expected results
Centered column with cards stacked normally, scrollable if needed (works correctly in Chrome / Firefox).
Actual results
In Safari 26.5 the page renders as an extremely tall scroll view: each child widget is separated by huge vertical gaps (many times its own height). The flutter-view element reports its normal viewport size (e.g. 1584x884) and <body> is position: fixed; inset: 0, but the rendered scene inside is enormous. Same behavior with the host app — confirmed it is not application code.
Switching the renderer to skwasm via wasmAllowList: { webkit: true } does not fix it.
Works fine in:
- Chrome / Edge (blink) — same build, same URL.
- Older Flutter (3.38.7 / engine prior to current) on the same Safari beta — confirmed by tagged build
windows-patient-manager-windows-1.0.0-build65-20260419-120b0bd of our app, which renders correctly on this same machine/browser.
Code sample
Code sample
import 'package:flutter/material.dart';
void main() => runApp(const TestApp());
class TestApp extends StatelessWidget {
const TestApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(32),
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 440),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const FlutterLogo(size: 96),
const SizedBox(height: 24),
Text('Safari Layout Test',
style: Theme.of(context).textTheme.headlineMedium),
const SizedBox(height: 48),
for (int i = 1; i <= 8; i++) ...[
Card(
child: ListTile(
leading: CircleAvatar(child: Text('$i')),
title: Text('Row $i'),
subtitle: const Text('subtitle text here'),
),
),
const SizedBox(height: 8),
],
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {}, child: const Text('Test Button')),
],
),
),
),
),
),
);
}
}Logs
No console errors. <body> computed style (broken case):
position: fixed; inset: 0; width: 1584px; height: 922px;
overflow: hidden;
<flutter-view> reports width: 1584px; height: 884px. The scene rendered inside Skia/canvaskit is many viewport-heights tall.
Flutter Doctor
Flutter 3.41.9 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 00b0c91f06 (3 days ago) • 2026-04-29 10:03:19 -0700
Engine • hash 9161402dc0e134b3fb5adee5046b6e84b1a5e1c1 (revision 42d3d75a56) (4 days ago) • 2026-04-28 17:31:55.000Z
Browser: Safari Release 242, Version 26.5 (21624.2.2), WebKit 21625.1.13.19.1
OS: macOS 26.5 Beta (25F5053d)
Steps to reproduce
flutter create safari_test(Flutter 3.41.9, engine 42d3d75)lib/main.dartwith a minimalScaffold > Center > SingleChildScrollView > ConstrainedBox(maxWidth: 440) > Columncontaining aFlutterLogo, aTextheadline, eightCards, and anElevatedButton(full source below).flutter build web --release --no-web-resources-cdnLive reproduction (canvaskit, default config):
https://alancook.github.io/patient-manager/safari-test/
Expected results
Centered column with cards stacked normally, scrollable if needed (works correctly in Chrome / Firefox).
Actual results
In Safari 26.5 the page renders as an extremely tall scroll view: each child widget is separated by huge vertical gaps (many times its own height). The
flutter-viewelement reports its normal viewport size (e.g.1584x884) and<body>isposition: fixed; inset: 0, but the rendered scene inside is enormous. Same behavior with the host app — confirmed it is not application code.Switching the renderer to
skwasmviawasmAllowList: { webkit: true }does not fix it.Works fine in:
windows-patient-manager-windows-1.0.0-build65-20260419-120b0bdof our app, which renders correctly on this same machine/browser.Code sample
Code sample
Logs
No console errors.
<body>computed style (broken case):<flutter-view>reportswidth: 1584px; height: 884px. The scene rendered inside Skia/canvaskit is many viewport-heights tall.Flutter Doctor
Browser: Safari Release 242, Version 26.5 (21624.2.2), WebKit 21625.1.13.19.1
OS: macOS 26.5 Beta (25F5053d)