[Web] Shift + scroll wheel not working when run on mac .

Steps to reproduce

Using macbook and start run debug or release
Hold left shift an scroll by using scroll wheel

Expected results

Web can start scroll horizontal

Actual results

Cannot scroll horizontal

Note :

it work normal when run on window
When start on safari . it cannot scroll by hold shift but press + scroll at same time it work

Code sample

Scrollbar(
          thumbVisibility: true,
          controller: controller,
          child: SingleChildScrollView(
            controller: controller,
            scrollDirection: Axis.horizontal,
            padding: EdgeInsets.symmetric(horizontal: 10.w),
            child: ConstrainedBox(
              constraints: BoxConstraints(
                minWidth: 800,
                maxWidth: max(context.width, 800),
                minHeight: context.height,
              ),
              child: CustomScrollView(
      shrinkWrap: true,
      key: UniqueKey(),
      slivers: [
        SliverToBoxAdapter(
          child: SizedBox(height: 20.h),
        ),
        SliverToBoxAdapter(child: widget.title),
        SliverToBoxAdapter(
          child: SizedBox(height: 12.h),
        ),
        const SliverToBoxAdapter(
          child: Divider(
            color: Color(0xffDCDCDD),
          ),
        ),
        SliverToBoxAdapter(
          child: SizedBox(height: 20.h),
        ),
        SliverToBoxAdapter(child: widget.header),
        SliverPadding(
          padding: EdgeInsets.symmetric(vertical: 15.h),
          sliver: const SliverToBoxAdapter(
            child: Divider(
              color: Color(0xffEDEDF0),
            ),
          ),
        ),
        SliverReorderableList(
          itemCount: widget.count,
          itemBuilder: (context, index) {
            return SizedBox(
              key: ValueKey(index),
              child: widget.itemBuilder.call(context, index),
            );
          },
          onReorder: (int oldIndex, int newIndex) {
            widget.onReorder?.call(oldIndex, newIndex);
          },
        ),
      ],
    ),
            ),
          ),

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

There is no log

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.24.5, on macOS 14.5 23F79 darwin-arm64, locale
    vi-VN)
    • Flutter version 3.24.5 on channel stable at /Users/hieucg/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision dec2ee5c1f (3 weeks ago), 2024-11-13 11:13:06 -0800
    • Engine revision a18df97ca5
    • Dart version 3.5.4
    • DevTools version 2.37.3

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at /Users/hieucg/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • ANDROID_HOME = /Users/hieucg/Library/Android/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      17.0.11+0-17.0.11b1207.24-11852314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16A242d
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2024.1)
    • 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.11+0-17.0.11b1207.24-11852314)

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

[✓] Connected device (3 available)
    • macOS (desktop)                 • macos                 • darwin-arm64   •
      macOS 14.5 23F79 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin         •
      macOS 14.5 23F79 darwin-arm64
    • Chrome (web)                    • chrome                • web-javascript •
      Google Chrome 131.0.6778.87

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

• No issues found!

@CaoGiaHieu-dev

@CaoGiaHieu-dev
Please check this issue and underlying comments to see if they help in your case further or not.

@CaoGiaHieu-dev

@CaoGiaHieu-dev
Can you please simplify the code sample that still shows the behavior ? I see lot of implementations of SliverToBoxAdapter.

@CaoGiaHieu-dev

@CaoGiaHieu-dev
I tried that but it didn't help in properly replicating the behavior you reported. Please provide us a runnable code that we can use to make the issue actionable.

You can use this code . run on chrome or safari (macos) an resize it until it show scrollbar at bottom (can scroll horizontal ), then follow my step above

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorSchemeSeed: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    super.key,
    required this.title,
  });

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

class _MyHomePageState extends State<MyHomePage> {
  final controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Scrollbar(
        thumbVisibility: true,
        controller: controller,
        child: SingleChildScrollView(
          controller: controller,
          scrollDirection: Axis.horizontal,
          padding: EdgeInsets.symmetric(horizontal: 10),
          child: ConstrainedBox(
            constraints: BoxConstraints(
              minWidth: 800,
              maxWidth: math.max(MediaQuery.of(context).size.width, 800),
              minHeight: MediaQuery.of(context).size.height,
            ),
            child: CustomScrollView(
              shrinkWrap: true,
              key: UniqueKey(),
              slivers: [
                SliverToBoxAdapter(
                  child: SizedBox(height: 20),
                ),
                SliverReorderableList(
                  itemCount: 100,
                  itemBuilder: (context, index) {
                    return SizedBox(
                        key: ValueKey(index), child: Text('$index' *1000));
                  },
                  onReorder: (int oldIndex, int newIndex) {},
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Thanks for the code update. Are you using trackpad or mouse to scroll while pressing left shift ? Because, with trackpad, I was able to scroll horizontally.

@dkwingsmt

cc @dkwingsmt

Screen.Recording.2024-12-26.at.1.55.44.PM.mov

I tried to run the sample code above with flutter run -d chrome but it seems to scroll with shift-scrollwheel.

Screen.Recording.2024-12-26.at.1.55.44.PM.mov
I tried to run the sample code above with flutter run -d chrome but it seems to scroll with shift-scrollwheel.

is it work with release mode ? im only able to scroll when hover on horizontal scrollbar

We have some users for whom the scrolling doesn't work on Chrome on macOS but for others with almost exactly same setup it works just fine. I believe the issue may be coming from the difference in mouse driver/hardware. The users for whom the scrolling doesn't work seem to use HP mouse, whereas for me it works with Logitech one.

I noticed, when I unfocused the web browser (e.g. by focusing another application), the scroll does work. If I focus the browser with the app again (click anywhere in the app), the horiztonal scroll + shift, does not have any effect any more (except for the scroll bar, if one adds dragDevices: {PointerDeviceKind.touch, PointerDeviceKind.mouse}, very weird. Both the same behavior with Chrome and Firefox on Macos.

fix: Apply reversed axis flip by macOS on Web when scroll with modifi…

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.

Navigation Menu

Repository navigation

[Web] Shift + scroll wheel not working when run on mac . #159868

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

7 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Web] Shift + scroll wheel not working when run on mac . #159868

Description

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

darshankawar commented on Dec 6, 2024

CaoGiaHieu-dev commented on Dec 6, 2024

darshankawar commented on Dec 6, 2024

CaoGiaHieu-dev commented on Dec 6, 2024

darshankawar commented on Dec 9, 2024

CaoGiaHieu-dev commented on Dec 9, 2024

darshankawar commented on Dec 10, 2024

7 remaining items

yjbanov commented on Dec 26, 2024

dkwingsmt commented on Dec 26, 2024

CaoGiaHieu-dev commented on Jan 7, 2025

orestesgaolin commented on May 12, 2025

Gustl22 commented on Jul 15, 2026

github-actions commented on Oct 2, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions