Skip to content

Semantics is misaligned with actual component on web #171264

@Harrisonnguyen97

Description

@Harrisonnguyen97

Steps to reproduce

  1. Enable semantics in flutter web
  2. Add any long data table with many items to enable scrolling
  3. Start to scroll fast

Expected results

Semantics nodes are correctly aligned with the items

Actual results

  • First row of the datatable is always misaligned whether scrolling or not
    => Remove dataRowMinHeight will fix this problem, but I want to be able to set this value
  • When scrolling fast, semantics nodes are misaligned with the items

Code sample

import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SemanticsBinding.instance.ensureSemantics();
  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),
      ),
      home: DataTableScreen(),
    );
  }
}

class DataTableScreen extends StatelessWidget {
  final List<Map<String, dynamic>> users = [
    {'name': 'Alice', 'age': 30, 'email': '[email protected]'},
    {'name': 'Bob', 'age': 25, 'email': '[email protected]'},
    {'name': 'Charlie', 'age': 35, 'email': '[email protected]'},
    {'name': 'Alice', 'age': 30, 'email': '[email protected]'},
    {'name': 'Bob', 'age': 25, 'email': '[email protected]'},
    {'name': 'Charlie', 'age': 35, 'email': '[email protected]'},
    {'name': 'Alice', 'age': 30, 'email': '[email protected]'},
    {'name': 'Bob', 'age': 25, 'email': '[email protected]'},
    {'name': 'Charlie', 'age': 35, 'email': '[email protected]'},
    {'name': 'Alice', 'age': 30, 'email': '[email protected]'},
    {'name': 'Bob', 'age': 25, 'email': '[email protected]'},
    {'name': 'Charlie', 'age': 35, 'email': '[email protected]'},
    {'name': 'Alice', 'age': 30, 'email': '[email protected]'},
    {'name': 'Bob', 'age': 25, 'email': '[email protected]'},
    {'name': 'Charlie', 'age': 35, 'email': '[email protected]'},
    {'name': 'Alice', 'age': 30, 'email': '[email protected]'},
    {'name': 'Bob', 'age': 25, 'email': '[email protected]'},
    {'name': 'Charlie', 'age': 35, 'email': '[email protected]'},
    {'name': 'Alice', 'age': 30, 'email': '[email protected]'},
    {'name': 'Bob', 'age': 25, 'email': '[email protected]'},
    {'name': 'Charlie', 'age': 35, 'email': '[email protected]'},
    {'name': 'Alice', 'age': 30, 'email': '[email protected]'},
    {'name': 'Bob', 'age': 25, 'email': '[email protected]'},
    {'name': 'Charlie', 'age': 35, 'email': '[email protected]'},
    {'name': 'Alice', 'age': 30, 'email': '[email protected]'},
    {'name': 'Bob', 'age': 25, 'email': '[email protected]'},
    {'name': 'Charlie', 'age': 35, 'email': '[email protected]'},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Data Table')),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16.0),
        scrollDirection: Axis.vertical,
        child: DataTable(
          dataRowMaxHeight: double.infinity,
          dataRowMinHeight: 70,
          showCheckboxColumn: false,
          columns: const [
            DataColumn(label: Text('Name')),
            DataColumn(label: Text('Age')),
            DataColumn(label: Text('Email')),
          ],
          rows: users
              .map(
                (user) => DataRow(
                  cells: [
                    DataCell(
                      onTap: () => print(user['name']),
                      Text(user['name']),
                    ),
                    DataCell(Text(user['age'].toString())),
                    DataCell(Text(user['email'])),
                  ],
                ),
              )
              .toList(),
        ),
      ),
    );
  }
}

Screenshots or Video

Screen.Recording.2025-06-27.at.10.58.12.mov
Screenshots / Video demonstration

[Upload media here]

Flutter Doctor output

Doctor output
flutter doctor 
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.32.4, on macOS 14.6.1 23G93 darwin-arm64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] VS Code (version 1.101.1)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!```

</details>

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listfound in release: 3.32Found to occur in 3.32found in release: 3.33Found to occur in 3.33frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-accessibilityOwned by Framework Accessibility team (i.e. responsible for accessibility code in flutter/flutter)triaged-accessibilityTriaged by Framework Accessibility team

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions