Skip to content

ensureSemantics() makes TextField font related properties in dev tools empty #129233

Closed
Closed
ensureSemantics() makes TextField font related properties in dev tools empty#129233
Assignees
flutter-zl
Labels
P2Important issues not at the top of the work lista: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)a: text inputEntering text in a text field or keyboard related problemsfound in release: 3.10Found to occur in 3.10found in release: 3.12Found to occur in 3.12frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

Description

@patrykorlowski1
patrykorlowski1
opened on Jun 21, 2023

Is there an existing issue for this?

Steps to reproduce

  1. Create flutter app with TextInput with fontSize 24px
  2. Add RendererBInding.instance.ensureSemantics() in initState() function
  3. Run web app from the code
  4. Insepct TextField with Chrome DevTools

Expected results

font-size attribute is set to 24px

Actual results

font-size not set

Code sample

Code sample 
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final textController = TextEditingController();

  @override
  void initState() {
    RendererBinding.instance.ensureSemantics();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(24.0),
              child: TextField(
                controller: textController,
                style: const TextStyle(fontSize: 24),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration image

Logs

Logs 
[Paste your logs here]

Flutter Doctor output

Doctor output 
[!] Flutter (Channel stable, 3.10.5, on macOS 13.0.1 22A400 darwin-arm64, locale pl-PL)
    • Flutter version 3.10.5 on channel stable at /users/xxxx/development/flutter
    ! Warning: `flutter` on your path resolves to /Users/xxxx/development/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /users/xxxx/development/flutter.
      Consider adding /users/xxxx/development/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/3.0.3/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /users/xxxx/development/flutter. Consider
      adding /users/xxxx/development/flutter/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 796c8ef792 (7 dni temu), 2023-06-13 15:51:02 -0700
    • Engine revision 45f6e00911
    • Dart version 3.0.5
    • DevTools version 2.23.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/xxxx/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.12.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.3)
    • 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.13+0-b1751.21-8125866)

[✓] VS Code (version 1.79.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.66.0

[✓] Connected device (3 available)
    • iPhone 14 Pro (mobile) • 5EDB2B99-BFCC-493E-BE18-F6312A5651F1 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 13.0.1 22A400 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 114.0.5735.133

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

Activity

  1. patrykorlowski1
    changed the title [-]`ensureSemantics()` makes TextField font related properties empty[/-] [+]`ensureSemantics()` makes TextField font related properties in dev tools empty[/+] on Jun 21, 2023
  2. huycozy
    added
    in triagePresently being triaged by the triage team
    on Jun 21, 2023

  3. huycozy commented on Jun 21, 2023

    @huycozy
    huycozy
    on Jun 21, 2023
    Member

    Thanks for your report. I check this on the latest master channel and also see the font size is missing (using browser inspector as you).

    Meanwhile, when I inspect TextField with Flutter Inspector, it's showing the correct font size:
    Screenshot 2023-06-21 at 17 02 48

    flutter doctor -v (stable and master) 
    [✓] Flutter (Channel stable, 3.10.5, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.10.5 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 796c8ef792 (29 hours ago), 2023-06-13 15:51:02 -0700
    • Engine revision 45f6e00911
    • Dart version 3.0.5
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.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.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.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
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.79.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.66.0

[✓] Connected device (5 available)
    • Pixel 3a (mobile)      • 964AY0WL20                               • android-arm64  • Android 12 (API 32)
    • iPhone (mobile)        • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.7.2 19H218
    • iPhone 14 Pro (mobile) • 98082851-A0C4-4E39-A310-21C48B10A364     • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)        • macos                                    • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)           • chrome                                   • web-javascript • Google Chrome 114.0.5735.133

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

• No issues found!
    [!] Flutter (Channel master, 3.12.0-7.0.pre.15, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.12.0-7.0.pre.15 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5182697c0d (31 hours ago), 2023-06-19 21:37:33 -0400
    • Engine revision a91bb3f566
    • Dart version 3.1.0 (build 3.1.0-230.0.dev)
    • DevTools version 2.24.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.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.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.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
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.79.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.66.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 114.0.5735.133

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

! Doctor found issues in 1 category.
  4. huycozy
    added
    a: text inputEntering text in a text field or keyboard related problems
    frameworkflutter/packages/flutter repository. See also f: labels.
    a: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)
    platform-webWeb applications specifically
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    found in release: 3.10Found to occur in 3.10
    found in release: 3.12Found to occur in 3.12
    and removed
    in triagePresently being triaged by the triage team
    on Jun 21, 2023

  5. patrykorlowski1 commented on Jun 21, 2023

    @patrykorlowski1
    patrykorlowski1
    on Jun 21, 2023
    Author

    @huycozy Main problem with not having proper font-size set in TextField attributes when using the app on the website is that iOS browsers automatically zoom in too small inputs on focus. I don't want to have that input text zoomed in when someone uses my website, but it always happens if I use ensureSemantics() in initState()

  6. htoor3
    added
    P2Important issues not at the top of the work list
    on Jun 29, 2023

  7. htoor3 commented on Jun 29, 2023

    @htoor3
    htoor3
    on Jun 29, 2023
    Contributor

    This is important to fix for iOS UX, as the auto zoom behavior isn't always desirable. Web devs can usually prevent this by setting font size greater than 16px, but computed font size in semantic mode is 13.33px regardless of the font size set via TextStyle.

  8. flutter-triage-bot
    added
    multiteam-retriage-candidate
    team-webOwned by Web platform team
    triaged-webTriaged by Web platform team
    on Jul 8, 2023
  9. Hixie
    removed
    multiteam-retriage-candidate
    on Mar 6, 2024
  10. pull
    added a commit that references this issue on Sep 10, 2026

    [web] Stop iOS auto-zoom by sizing semantic inputs at 16px (flutter#1…

    0414680
  11. flutter-zl
    self-assigned this
    on Sep 10, 2026

  12. flutter-zl commented on Sep 10, 2026

    @flutter-zl
    flutter-zl
    on Sep 10, 2026
    Contributor

    This issue should be fixed by #192328.

    Before fix: https://flutter-demo-50-before.web.app/
    After fix: https://flutter-demo-50-after.web.app/

  13. flutter-zl
    closed this as completedon Sep 10, 2026

  14. github-actions commented on Sep 24, 2026

    @github-actions
    github-actionsbot
    on Sep 24, 2026 – with GitHub Actions

    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 -v and a minimal reproduction of the issue.

  15. github-actions
    locked as resolved and limited conversation to collaborators on Sep 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work lista: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)a: text inputEntering text in a text field or keyboard related problemsfound in release: 3.10Found to occur in 3.10found in release: 3.12Found to occur in 3.12frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions