Repository navigation
Title jumps during a CupertinoNavigationBar -> CupertinoNavigationBar hero transition #90589
Description
August 2024 update:
- Resolved in sliver version, not static one
- Related to CupertinoNavigationBar flickers when previousPageTitle more than 4 characters #149905
Steps to Reproduce
This issue is very similar to #45068 but it differs in one thing: I can reproduce similar text jumps with non default text Scale when the transition is done between two pages both using CupertinoSliverNavigationBar (in #45068 was a CupertinoSliverNavigationBar -> CupertinoNavigationBar and, in my tests, this issue is not present in the current SDK)
I'm using latest Flutter stable 2.5.1 and iOS 15. The issue is present both on simulator and physical devices.
Steps to reproduce the issue:
- Run
flutter create bug. - Update the
main.dartfile as follows:
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
void main() {
return runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const CupertinoApp(
home: InitPage(),
);
}
}
class InitPage extends StatelessWidget {
const InitPage({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
double textScale = MediaQuery.of(context).textScaleFactor;
return CupertinoPageScaffold(
child: CustomScrollView(slivers: [
CupertinoSliverNavigationBar(
largeTitle: Text("${textScale == 1.0 ? "Good" : "BUGGY"} header"),
),
SliverFillRemaining(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Actual Scale: $textScale",
style: const TextStyle(fontSize: 30),
),
const Padding(padding: EdgeInsets.only(bottom: 20)),
CupertinoButton(
child: const Text("Push page >"),
color: CupertinoColors.systemRed,
onPressed: () => Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => const SliverBugHeader(),
settings: const RouteSettings(name: "Title")))),
],
),
),
]));
}
}
class SliverBugHeader extends StatelessWidget {
const SliverBugHeader({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
double textScale = MediaQuery.of(context).textScaleFactor;
return CupertinoPageScaffold(
child: CustomScrollView(
slivers: [
CupertinoSliverNavigationBar(
trailing: CupertinoButton(
child: const Text("Top right"),
padding: EdgeInsets.zero,
onPressed: () {},
),
largeTitle: Text("${textScale == 1.0 ? "Good" : "BUGGY"} header"),
),
SliverFillRemaining(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Actual Scale: $textScale",
style: const TextStyle(fontSize: 30),
),
const Padding(padding: EdgeInsets.only(bottom: 20)),
CupertinoButton(
child: const Text("Push new page >"),
color: CupertinoColors.systemRed,
onPressed: () => Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => const SliverBugHeader(),
settings: const RouteSettings(name: "Title")),
)),
CupertinoButton(
child: const Text("< Pop page"),
color: CupertinoColors.systemBlue,
onPressed: () => Navigator.pop(context)),
],
),
)
],
),
);
}
}- Navigate with default text scale (1.0) between pages. The header should be fine. Then change the text scale (using
⌥⌘+and⌥⌘-on iOS simulator or control center shortcuts on physical devices) - Then navigate again between pages. The issue will be reproduced.
Expected results: Clear transitions like the ones that we're having with default scale.
Actual results: Unexpected text jumps in header elements font size when the transition is going to end.
Logs
N/A
[✓] Flutter (Channel stable, 2.5.1, on macOS 11.5.2 20G95 darwin-arm, locale
es-ES)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.60.1)
[✓] Connected device (3 available)
• No issues found!
Activity
darshankawar commentedon Sep 23, 2021
@henry2man
Tried your code sample on iPhone 6s (OS 14.4.1) and observed below:
RPReplay-Final1632395233.MP4
RPReplay-Final1632395271.MP4
If I understand the issue correctly, the title text
Headerjumps or rebounds a bit while navigating back when we increase the text scale ?henry2man commentedon Sep 23, 2021
@darshankawar Yes, both the title text AND the upper left and right buttons & icons rebounds while navigating back.
The issue is more pronounced the higher the font size is raised.
I'm not an absolute UIKit specialist but as far as I know the scale should always stay at 1.0, following Apple's guidelines. It seems that during the transition the scale goes from 1.0 to the scale set by the user.
darshankawar commentedon Sep 24, 2021
Thanks for the details. I see the same behavior based on my earlier comment. Keeping it open for further insights from the team on the expected / intended behavior.
stable, master flutter doctor -v
darshankawar commentedon Sep 24, 2021
similar issue for reference: #45068
/cc: @justinmc
14 remaining items
[-][BUG] [IOS] Navbar text jumps during a CupertinoSliverNavigationBar -> CupertinoSliverNavigationBar transition[/-][+]Title jumps during a CupertinoNavigationBar -> CupertinoNavigationBar hero transition[/+]victorsanni commentedon Nov 11, 2024
@henry2man is this the same as #67269?
CupertinoSliverNavigationBar respects accessibility text scaling (#16…
github-actions commentedon May 29, 2025
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.