[Flutter-web] Control+MouseWheel should zoom the browser window

Is there an existing issue for this?

I have searched the existing issues
I have read the guide to filing a bug

Steps to reproduce

Just create a new flutter project, and run platform web.

Expected results

Control+MouseWheel can make browser zoom.

Actual results

Control+MouseWheel browser zoom not working. But Control combine - or + is well. And my device is Windows Chrome/Edge.

Code sample

import 'package:flutter/material.dart';

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

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

  @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> {
  int _counter = 0;

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

  @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: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Flutter Doctor output

Doctor output

[√] Flutter (Channel stable, 3.10.5, on Microsoft Windows [版本 10.0.19045.3086], locale zh-CN)
    • Flutter version 3.10.5 on channel stable at E:\git\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 796c8ef792 (3 weeks ago), 2023-06-13 15:51:02 -0700
    • Engine revision 45f6e00911
    • Dart version 3.0.5
    • DevTools version 2.23.1
    • Pub download mirror https://pub.flutter-io.cn
    • Flutter download mirror https://storage.flutter-io.cn

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at C:\Users\Admin\AppData\Local\Android\sdk
    • Platform android-33, build-tools 33.0.2
    • Java binary at: E:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components

[√] Android Studio (version 2022.2)
    • Android Studio at E:\Program Files\Android\Android Studio
    • 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-b2043.56-9586694)

[√] VS Code (version 1.79.2)
    • VS Code at C:\Users\Admin\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.66.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [版本 10.0.19045.3086]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 114.0.5735.199
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 114.0.1823.67

@huanghui1998hhh

Thanks for the report @huanghui1998hhh

my device is Windows Chrome/Edge.

Although I am not on Windows, but I verified this on mac + Chrome using latest master wherein, I was able to zoom in and out properly using control + mouse wheel.

Can you run the scenario again on latest master to confirm if the behavior still persists or not ?

flutter channel master
flutter upgrade

It's still exists on Flutter (Channel master, 3.12.0-13.0.pre.40). And it works well on Mac. Maybe only not working on Windows.

Doctor output

[√] Flutter (Channel master, 3.12.0-13.0.pre.40, on Microsoft Windows [版本 10.0.19045.3086], locale zh-CN)
    • Flutter version 3.12.0-13.0.pre.40 on channel master at E:\git\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ddb16b7d92 (15 hours ago), 2023-07-03 14:27:33 -0400
    • Engine revision 987b621eac
    • Dart version 3.1.0 (build 3.1.0-262.0.dev)
    • DevTools version 2.25.0
    • Pub download mirror https://pub.flutter-io.cn
    • Flutter download mirror https://storage.flutter-io.cn

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at C:\Users\Admin\AppData\Local\Android\sdk
    • Platform android-33, build-tools 33.0.2
    • Java binary at: E:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[X] Visual Studio - develop Windows apps
    X Visual Studio not installed; this is necessary to develop Windows apps.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components

[√] Android Studio (version 2022.2)
    • Android Studio at E:\Program Files\Android\Android Studio
    • 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-b2043.56-9586694)

[√] VS Code (version 1.79.2)
    • VS Code at C:\Users\Admin\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.68.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [版本 10.0.19045.3086]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 114.0.5735.199
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 114.0.1823.67

And i found, it's well when i use Flutter (Channel stable, 3.7.12). But on 3.10.0, it failed.

@huanghui1998hhh

@huanghui1998hhh I can reproduce this issue on the latest Flutter channels. And I see it works on Flutter 3.7.12 as you mentioned.

Verified the issue on Chrome (Windows/Linux).

On macOS, it is not feasible to reproduce the issue because Control+MouseWheel will zoom the whole screen instead of web content. Instead, I can see Pinch-zooming gesture with trackpad does zoom web content but it's not working on Flutter web (whilst it works with another website, such as github.com). I think Pinch-zooming gesture is blocked by #112103.

flutter doctor -v (stable & master)

[√] Flutter (Channel stable, 3.10.5, on Microsoft Windows [Version 10.0.19045.2965], locale en-US)
    • Flutter version 3.10.5 on channel stable at C:\WIP\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 796c8ef792 (5 days ago), 2023-06-13 15:51:02 -0700
    • Engine revision 45f6e00911
    • Dart version 3.0.5
    • DevTools version 2.23.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at C:\AndroidSDK
    • Platform android-33, build-tools 33.0.0
    • ANDROID_HOME = C:\AndroidSDK
    • Java binary at: C:\Program Files\Android\Android Studio Electric Eel 2022.1.1\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.4.4)
    • Visual Studio at D:\DOWNLOADWORK\VS2022
    • Visual Studio Community 2022 version 17.4.33213.308
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2021.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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.12+7-b1504.28-7817840)

[√] Android Studio (version 2022.1)
    • Android Studio at C:\Program Files\Android\Android Studio Electric Eel 2022.1.1
    • 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.0)
    • VS Code at C:\Users\ADMIN\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.66.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19045.2965]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 114.0.5735.134
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 113.0.1774.42

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

• No issues found!

[!] Flutter (Channel master, 3.12.0-13.0.pre.42, on Microsoft Windows [Version 10.0.19045.3086], locale en-US)
    • Flutter version 3.12.0-13.0.pre.42 on channel master at C:\WIP\flutter_master
    ! Warning: `flutter` on your path resolves to C:\WIP\flutter\bin\flutter, which is not inside your current
      Flutter SDK checkout at C:\WIP\flutter_master. Consider adding C:\WIP\flutter_master\bin to the front of your
      path.
    ! Warning: `dart` on your path resolves to C:\WIP\flutter\bin\dart, which is not inside your current Flutter SDK
      checkout at C:\WIP\flutter_master. Consider adding C:\WIP\flutter_master\bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5b12b7467f (13 hours ago), 2023-07-04 10:12:49 -0700
    • Engine revision 987b621eac
    • Dart version 3.1.0 (build 3.1.0-262.0.dev)
    • DevTools version 2.25.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.

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at C:\AndroidSDK
    • Platform android-33, build-tools 33.0.0
    • ANDROID_HOME = C:\AndroidSDK
    • Java binary at: C:\Program Files\Android\Android Studio Electric Eel 2022.1.1\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.4.4)
    • Visual Studio at D:\DOWNLOADWORK\VS2022
    • Visual Studio Community 2022 version 17.4.33213.308
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2021.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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.12+7-b1504.28-7817840)

[√] Android Studio (version 2022.1)
    • Android Studio at C:\Program Files\Android\Android Studio Electric Eel 2022.1.1
    • 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 C:\Users\ADMIN\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.68.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19045.3086]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 114.0.5735.199
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 113.0.1774.42

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

! Doctor found issues in 1 category.

Any fix/update? I have the same problem on 3.13.7

@darshankawar

@darshankawar any news?

Please upvote original issue description instead of asking for updates. The issue has high chances of getting attention depending on number of upvotes.

Could it be that the changes to pointer_binding.dart in this commit are responsible for this? Previously, preventDefault() was not called on wheel events when Ctrl was pressed and the OS was neither macOs nor iOS, which allowed the browsers on Windows to handle these wheel events properly and modify the scale. Why this commit changed this to call WheelEvent.preventDefault also for Windows based browsers, I cannot understand.

A dirty walkaround I found is to use stopImmediatePropagation() to prevent preventDefaults() from being called.

<body>
  <script src="flutter_bootstrap.js" async></script>

  <script>
    window.addEventListener('wheel', (e) => {
      if (e.ctrlKey) {
        e.stopImmediatePropagation();
      }
    }, { capture: true });
  </script>
  
</body>

Is this issue is resolved now ....?

Navigation Menu

Repository navigation

[Flutter-web] Control+MouseWheel should zoom the browser window #129933

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Flutter Doctor output

3 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Flutter-web] Control+MouseWheel should zoom the browser window #129933

Description

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Flutter Doctor output

Activity

darshankawar commented on Jul 4, 2023

huanghui1998hhh commented on Jul 4, 2023

huanghui1998hhh commented on Jul 5, 2023

huycozy commented on Jul 5, 2023

3 remaining items

n-lou commented on Oct 14, 2023

felipekjr commented on Nov 8, 2023

darshankawar commented on Nov 9, 2023

ds-luccl commented on Nov 15, 2023

AhmedViper commented on May 19, 2025

sameer8287 commented on Sep 21, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions