Scrolling on large texts often fails

[matt3o]

Is there an existing issue for this?

• I have searched the existing issues

Flutter Quill version

10.8.5

Steps to reproduce

Sample code:

import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart';
import 'quill_screen_sample_data.dart';
import 'package:flutter_quill/quill_delta.dart';

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

class QuillBugApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(scrollbarTheme: ScrollbarThemeData().copyWith(thickness: WidgetStatePropertyAll(20.0))),
        home: Scaffold(
            // appBar: AppBar(
            //   title: Text("Quill test widget"),
            // ),
            body: Center(child: QuillEditorScreen())));
  }
}

class QuillEditorScreen extends StatefulWidget {
  @override
  _QuillEditorScreenState createState() => _QuillEditorScreenState();
}

class _QuillEditorScreenState extends State<QuillEditorScreen> {
  late QuillController _controller;
  final ScrollController _scrollController = ScrollController();
  bool showFullComment = false;
  List<Map<String, dynamic>> _headings = [];

  @override
  void initState() {
    final delta = Delta()..insert(aliceInWonderland + '\n');
    var document = Document.fromDelta(delta);
    _controller = QuillController(
      document: document,
      selection: TextSelection.collapsed(offset: 0),
    );
  }

  void _onHeadingsUpdate(List<Map<String, dynamic>> headings) {
    setState(() {
      _headings = headings;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Quill Editor'),
      ),
      body: Padding(
          padding: const EdgeInsets.all(25.0),
          child: QuillEditor.basic(
            controller: _controller,
            scrollController: _scrollController,
          )
          // QuillEditorWidget(
          //   controller: _controller,
          //   scrollController: _scrollController,
          //   onHeadingsUpdate: _onHeadingsUpdate,
          // ),
          ),
    );
  }
}

// Visit https://www.gutenberg.org/files/11/11-h/11-h.htm, Ctrl+a paste here
const String aliceInWonderland = """
"""

1. Fill in the sample text.
2. Launch the application on Chrome (flutter web), now try to scroll and or mark text

(I did not test any other platforms yet as I am currently prototyping)

Expected results

Scrolling works without problems. Marking text works with maybe a short delay.

Actual results

Different bugs occur, see the video. Sometimes the handle is not grabbed even though I am clearly on the handle area and it is dark grey showing that it can get grabbed. Sometimes it starts scrolling then jumps up and refuses to move any further.
This is seemly random, I could not find any reasons for this behaviour.
Manually scrolling up and down with the mouse wheel appears to reset this behaviour sometimes.

Note that I increased the size of the scrollbar specifically when trying to debug the issue, it occurs also on the default scrollbar size.

Additional Context

Screenshots / Video demonstration

quill.slow.selection.1.2.online-video-cutter.com.mp4

quill.slow.selection.2.2.online-video-cutter.com.mp4

[matt3o]

Note by setting enableInteractiveSelection: false the problem just vanished, so the scrolling issue has to do something with the interactive selection issue.