textScaleFactor not working on web when text scale change in Browser/System Level

[tsinis]

Hey Flutter Team!

There is problem with textScaleFactor in web builds inside Chrome (desktop versions, i have tested on Windows 10). It's just ignored in fact. For example, if user have text scaling in Windows set to 125% i can do nothing about it in my web site made with Flutter, because textScaleFactor parameters (set to 1.0 in Text()) is overrides by those system settings. So fonts become messy... Same code hover working properly on Android platform (as an APK).

I believe there should be labels: "a: typography", "☸ platform-web" .

Steps to Reproduce

1. Run flutter create textscalefactor.
2. Swap lib/main.dart with main.dart file from attachment
   textScalFactor.zip
3. Change Scale and layout in Settings (Display Settings) to anything bigger then 100%
4. Run cd textscalefactor
5. Run
   flutter run -d chrome --release --dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true or just flutter run -d chrome

Expected results:
Fonts should have sizes defined in TextStyle's fontSize parameter. Please see screenshots in attachment ZIP file.

Actual results:
Fonts have sizes multiplied by % from system's font scale settings. Please see screenshots in attachment ZIP file.

Logs

PS C:\Users\tsinis\Documents\GitHub\textscalefactor> flutter run -d chrome  --verbose
[  +39 ms] executing: [C:\Android\flutter/] git -c log.showSignature=false log -n 1 --pretty=format:%H
[  +79 ms] Exit code 0 from: git -c log.showSignature=false log -n 1 --pretty=format:%H
[   +1 ms] 3018d8ddb3b40156b6d5a32ee4deaaa80277ea71
[   +1 ms] executing: [C:\Android\flutter/] git describe --match v*.*.* --first-parent --long --tags
[  +62 ms] Exit code 0 from: git describe --match v*.*.* --first-parent --long --tags
[   +1 ms] v1.15.10-0-g3018d8ddb
[  +10 ms] executing: [C:\Android\flutter/] git rev-parse --abbrev-ref --symbolic @{u}
[  +50 ms] Exit code 0 from: git rev-parse --abbrev-ref --symbolic @{u}
[   +1 ms] origin/dev
[        ] executing: [C:\Android\flutter/] git ls-remote --get-url origin
[ +100 ms] Exit code 0 from: git ls-remote --get-url origin
[   +3 ms] https://github.com/flutter/flutter.git
[ +132 ms] executing: [C:\Android\flutter/] git rev-parse --abbrev-ref HEAD
[  +48 ms] Exit code 0 from: git rev-parse --abbrev-ref HEAD
[   +1 ms] dev
[  +77 ms] Artifact Instance of 'AndroidMavenArtifacts' is not required, skipping update.
[   +1 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.
[   +1 ms] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[   +1 ms] 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.
[   +1 ms] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[  +64 ms] executing: C:\Android\platform-tools\adb.exe devices -l
[  +27 ms] Exit code 0 from: C:\Android\platform-tools\adb.exe devices -l
[   +1 ms] List of devices attached
[  +15 ms] Artifact Instance of 'AndroidMavenArtifacts' is not required, skipping update.
[        ] 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.
[   +1 ms] 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.
[   +1 ms] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[ +359 ms] Generating C:\Users\tsinis\Documents\GitHub\textscalefactor\android\app\src\main\java\io\flutter\plugins\GeneratedPluginRegistrant.java
[ +193 ms] Launching lib\main.dart on Chrome in debug mode...
[ +171 ms] Serving DevTools at http://127.0.0.1:50227

[  +12 ms] Updating assets
[ +149 ms] Syncing files to device Chrome...
[  +84 ms] Generating C:\Users\tsinis\Documents\GitHub\textscalefactor\android\app\src\main\java\io\flutter\plugins\GeneratedPluginRegistrant.java
[  +49 ms] <- reset
[  +14 ms] C:\Android\flutter\bin\cache\dart-sdk\bin\dart.exe C:\Android\flutter\bin\cache\artifacts\engine\windows-x64\frontend_server.dart.snapshot --sdk-root
C:\Android\flutter\bin\cache\flutter_web_sdk/ --incremental --target=dartdevc -Ddart.developer.causal_async_stacks=true --output-dill
C:\Users\tsinis\AppData\Local\Temp\flutter_tool.5beaafe9-5f32-11ea-b922-2818783214f0\app.dill --libraries-spec
file:///C:/Android/flutter/bin/cache/flutter_web_sdk/libraries.json --packages C:\Users\tsinis\Documents\GitHub\textscalefactor\.packages -Ddart.vm.profile=false
-Ddart.vm.product=false --bytecode-options=source-positions,local-var-info,debugger-stops,instance-field-initializers,keep-unreachable-code,avoid-closure-call-instructions
--enable-asserts --track-widget-creation --filesystem-root C:\Users\tsinis\AppData\Local\Temp\flutter_tools.5beaafea-5f32-11ea-b922-2818783214f0 --filesystem-scheme
org-dartlang-app --platform file:///C:/Android/flutter/bin/cache/flutter_web_sdk/kernel/flutter_ddc_sdk.dill
[  +20 ms] <- compile org-dartlang-app:///web_entrypoint.dart
[+21322 ms] Syncing files to device Chrome... (completed in 21,478ms, longer than expected)
[   +2 ms] Synced 20.6MB.
[        ] <- accept
[ +271 ms] [CHROME]:
[  +28 ms] [CHROME]:DevTools listening on ws://127.0.0.1:50249/devtools/browser/b7b9be9a-8a2f-44f4-a33e-a4ebd7fd1464
[+6711 ms] Debug service listening on ws://127.0.0.1:50286/sLCDppapvyI=

[ +561 ms] Debug service listening on ws://127.0.0.1:50286/sLCDppapvyI=
[   +3 ms] Warning: Flutter's support for web development is not stable yet and hasn't
[        ] been thoroughly tested in production environments.
[        ] For more information see https://flutter.dev/web
[   +1 ms]   To hot restart changes while running, press "r". To hot restart (and refresh the browser), press "R".
[   +1 ms] For a more detailed help message, press "h". To quit, press "q".

PS C:\Users\tsinis\Documents\GitHub\textscalefactor> flutter analyze 
Analyzing textscalefactor...                                            
No issues found! (ran in 4.6s)

PS C:\Users\tsinis\Documents\GitHub\textscalefactor> flutter doctor -v
[√] Flutter (Channel dev, v1.15.10, on Microsoft Windows [Version 10.0.17763.1075], locale en-US)
    • Flutter version 1.15.10 at C:\Android\flutter
    • Framework revision 3018d8ddb3 (18 hours ago), 2020-03-04 20:46:01 -0800
    • Engine revision 7df0a6e35e
    • Dart version 2.8.0 (build 2.8.0-dev.11.0 8e5354dccb)

 
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at C:\Android\
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = C:\Android
    • ANDROID_SDK_ROOT = C:\Android\tools
    • Java binary at: C:\Android\openjdk\bin\java
    • Java version OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_242-b08)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • CHROME_EXECUTABLE = C:\Users\tsinis\AppData\Local\Google\Chrome SxS\Application\chrome.exe

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).

[√] Connected device (2 available)
    • Chrome     • chrome     • web-javascript • unknown
    • Web Server • web-server • web-javascript • Flutter Tools

! Doctor found issues in 1 category.

[iapicca]

Hi @tsinis
I see the same on beta

screenshot

code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (BuildContext context, Widget child) => MediaQuery(
        data: MediaQuery.of(context).copyWith(textScaleFactor: 5.0),
        child: child,
      ),
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title, textScaleFactor: 1),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
}

logs

nevercode@Nevercodes-MacBook-Air sixth_march % flutter run -d chrome --release --dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true --verbose
[  +30 ms] executing: [/Users/nevercode/development/flutter/] git -c log.showSignature=false log -n 1 --pretty=format:%H
[  +58 ms] Exit code 0 from: git -c log.showSignature=false log -n 1 --pretty=format:%H
[        ] fabeb2a16f1d008ab8230f450c49141d35669798
[        ] executing: [/Users/nevercode/development/flutter/] git describe --match v*.*.* --first-parent --long --tags
[  +50 ms] Exit code 0 from: git describe --match v*.*.* --first-parent --long --tags
[        ] v1.14.6-0-gfabeb2a16
[  +15 ms] executing: [/Users/nevercode/development/flutter/] git rev-parse --abbrev-ref --symbolic @{u}
[  +19 ms] Exit code 0 from: git rev-parse --abbrev-ref --symbolic @{u}
[        ] origin/beta
[        ] executing: [/Users/nevercode/development/flutter/] git ls-remote --get-url origin
[  +17 ms] Exit code 0 from: git ls-remote --get-url origin
[        ] https://github.com/flutter/flutter.git
[  +72 ms] executing: [/Users/nevercode/development/flutter/] git rev-parse --abbrev-ref HEAD
[  +14 ms] Exit code 0 from: git rev-parse --abbrev-ref HEAD
[        ] beta
[   +9 ms] executing: sw_vers -productName
[  +26 ms] Exit code 0 from: sw_vers -productName
[        ] Mac OS X
[        ] executing: sw_vers -productVersion
[  +21 ms] Exit code 0 from: sw_vers -productVersion
[        ] 10.15.3
[        ] executing: sw_vers -buildVersion
[  +25 ms] Exit code 0 from: sw_vers -buildVersion
[        ] 19D76
[  +50 ms] Artifact Instance of 'AndroidMavenArtifacts' is not required, skipping update.
[        ] 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.
[   +6 ms] Artifact Instance of 'WindowsEngineArtifacts' 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.
[  +59 ms] executing: /Users/nevercode/Library/Android/sdk/platform-tools/adb devices -l
[   +7 ms] Exit code 0 from: /Users/nevercode/Library/Android/sdk/platform-tools/adb devices -l
[        ] List of devices attached
[  +24 ms] executing: /Users/nevercode/development/flutter/bin/cache/artifacts/libimobiledevice/idevice_id -h
[  +70 ms] executing: /usr/bin/xcode-select --print-path
[  +10 ms] Exit code 0 from: /usr/bin/xcode-select --print-path
[        ] /Applications/Xcode.app/Contents/Developer
[   +1 ms] executing: /usr/bin/xcodebuild -version
[+1261 ms] Exit code 0 from: /usr/bin/xcodebuild -version
[   +3 ms] Xcode 11.3.1
           Build version 11C504
[   +5 ms] /usr/bin/xcrun simctl list --json devices
[ +170 ms] Artifact Instance of 'AndroidMavenArtifacts' is not required, skipping update.
[        ] 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 '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.
[ +219 ms] Generating /Users/nevercode/Desktop/projects/sixth_march/android/app/src/main/java/io/flutter/plugins/GeneratedPluginRegistrant.java
[ +187 ms] Launching lib/main.dart on Chrome in release mode...
[        ] Building application for the web...
[ +176 ms] Generating /Users/nevercode/Desktop/projects/sixth_march/android/app/src/main/java/io/flutter/plugins/GeneratedPluginRegistrant.java
[  +10 ms] Compiling lib/main.dart for the Web...
[  +24 ms] Initializing file store
[  +38 ms] Done initializing file store
[ +152 ms] invalidated build due to missing files: /Users/nevercode/Desktop/projects/sixth_march/packages/flutter_tools/lib/src/build_system/targets/web.dart
[  +11 ms] web_entrypoint: Starting due to {InvalidatedReason.inputMissing}
[   +3 ms] web_entrypoint: Complete
[+2240 ms] Skipping target: dart2js
[  +64 ms] Skipping target: web_release_bundle
[  +59 ms] Skipping target: web_service_worker
[   +1 ms] Persisting file store
[   +8 ms] Done persisting file store
[  +23 ms] Compiling lib/main.dart for the Web... (completed in 2.6s)
[  +17 ms] Building application for the web... (completed in 2.8s)
[+1302 ms] Warning: Flutter's support for web development is not stable yet and hasn't
[        ] been thoroughly tested in production environments.
[        ] For more information see https://flutter.dev/web
[        ] 🔥  To hot restart changes while running, press "r". To hot restart (and refresh the browser), press "R".
[ +183 ms] For a more detailed help message, press "h". To quit, press "q".
[+176020 ms] Performing hot restart...
[  +43 ms] Generating /Users/nevercode/Desktop/projects/sixth_march/android/app/src/main/java/io/flutter/plugins/GeneratedPluginRegistrant.java
[   +8 ms] Compiling lib/main.dart for the Web...
[   +1 ms] Initializing file store
[  +16 ms] Done initializing file store
[  +61 ms] invalidated build due to missing files: /Users/nevercode/Desktop/projects/sixth_march/packages/flutter_tools/lib/src/build_system/targets/web.dart
[   +1 ms] web_entrypoint: Starting due to {InvalidatedReason.inputMissing}
[   +1 ms] web_entrypoint: Complete
[+2184 ms] dart2js: Starting due to {InvalidatedReason.inputChanged}
[+22901 ms] dart2js: Complete
[  +74 ms] web_release_bundle: Starting due to {InvalidatedReason.inputChanged, InvalidatedReason.outputChanged}
[  +57 ms] web_release_bundle: Complete
[  +77 ms] web_service_worker: Starting due to {InvalidatedReason.inputChanged}
[  +35 ms] web_service_worker: Complete
[   +2 ms] Persisting file store
[   +5 ms] Done persisting file store
[   +6 ms] Compiling lib/main.dart for the Web... (completed in 25.4s)
[  +17 ms] Performing hot restart... (completed in 25.5s)
[        ] Recompile complete. Page requires refresh.

flutter doctor -v

nevercode@Nevercodes-MacBook-Air sixth_march % flutter doctor -v
[✓] Flutter (Channel beta, v1.14.6, on Mac OS X 10.15.3 19D76, locale en-EE)
    • Flutter version 1.14.6 at /Users/nevercode/development/flutter
    • Framework revision fabeb2a16f (5 weeks ago), 2020-01-28 07:56:51 -0800
    • Engine revision c4229bfbba
    • Dart version 2.8.0 (build 2.8.0-dev.5.0 fc3af737c7)


[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/nevercode/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.3.1, Build version 11C504
    • CocoaPods version 1.9.0

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

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 43.0.1
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[✓] VS Code
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.8.1

[✓] Connected device (2 available)
    • Chrome     • chrome     • web-javascript • Google Chrome 80.0.3987.132
    • Web Server • web-server • web-javascript • Flutter Tools

• No issues found!

thank you for reporting this

[tsinis]

Hey! Any update on this? This bug makes Flutter Web unusable in Chrome on Windows and Linux (and I believe on some Retina Display Macs) platforms In term of responsive layouts, UX and so on. Because we cannot predict user's Font Scale settings in OS on those platforms.

Here you can find screenshots from recent Ubuntu's Chrome, textScaleFactor 1.0 is also ignored, because of override with system "Large Fonts" settings turned on...
linux_chrome_textScaleFactor_ignored.zip
Thanks!

[mdebbar]

I looked into this for a bit, but I couldn't find a way to access the system text scale factor inside the browser. If you've seen other web apps doing this, I would love to learn more.

[roman-petrov]

@mdebbar, maybe window.devicePixelRatio will do the job?..

[mdebbar]

@roman-petrov window.devicePixelRatio affects all pixels in the window, it's not specific to text. We already use dpr to render the correct resolution in flutter web.