[QUESTION] Whenever I use AnchorKey.forId the scroll location is vertically off

Hello,

I’m using AnchorKey.forId while scrolling to the target specified id.

Everything seems to be working fine in the Simulator, but when I test it on the actual phone, the scroll position seems to be slightly off vertically. This is happening on both iOS and Android phones.

Let me know if there’s anything I can do! Thanks!

Code Sample

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    final htmlKey = GlobalKey();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Project'),
      ),
      body: SingleChildScrollView(
        child: Html(
          anchorKey: htmlKey,
          data: r"""
                <h1>Header 1</h1><h2 id='content'>Header 2</h2><h3>Header 3</h3><h4>Header 4</h4><h5>Header 5</h5><h6>Header 6</h6><h3>Ruby Support:</h3><p><ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>&nbsp;is Japanese Kanji.</p><h3>Support for maxLines:</h3><h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum sapien feugiat lorem tempor, id porta orci elementum. Fusce sed justo id arcu egestas congue. Fusce tincidunt lacus ipsum, in imperdiet felis ultricies eu. In ullamcorper risus felis, ac maximus dui bibendum vel. Integer ligula tortor, facilisis eu mauris ut, ultrices hendrerit ex. Donec scelerisque massa consequat, eleifend mauris eu, mollis dui. Donec placerat augue tortor, et tincidunt quam tempus non. Quisque sagittis enim nisi, eu condimentum lacus egestas ac. Nam facilisis luctus ipsum, at aliquam urna fermentum a. Quisque tortor dui, faucibus in ante eget, pellentesque mattis nibh. In augue dolor, euismod vitae eleifend nec, tempus vel urna. Donec vitae augue accumsan ligula fringilla ultrices et vel ex.</h5><h2 id='middle'>SVG support:</h2><svg id='svg1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><circle r="32" cx="35" cy="65" fill="#F00" opacity="0.5"/><circle r="32" cx="65" cy="65" fill="#0F0" opacity="0.5"/><circle r="32" cx="50" cy="35" fill="#00F" opacity="0.5"/></svg><h3>List support:</h3><ol><li>This</li><li><p>is</p></li><li>an</li><li><ul><li>With<br /><br />...</li><li>a</li><li>nested</li><li>unordered<ol style="list-style-type: lower-alpha;" start="5"><li>With a nested</li><li>ordered list</li><li>with a lower alpha list style</li><li>starting at letter e</li></ol></li><li>list</li></ul></li><li>list! Lorem ipsum dolor sit amet.</li><li><h2>Header 2</h2></li><h2 id='content2'><li>Header 2</li></h2></ol><h3>Link support:</h3><p>Linking to <a href='https://github.com'>websites</a> has never been easier.</p>
                <h1>Header 1</h1><h2 id='content'>Header 2</h2><h3>Header 3</h3><h4>Header 4</h4><h5>Header 5</h5><h6>Header 6</h6><h3>Ruby Support:</h3><p><ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>&nbsp;is Japanese Kanji.</p><h3>Support for maxLines:</h3><h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum sapien feugiat lorem tempor, id porta orci elementum. Fusce sed justo id arcu egestas congue. Fusce tincidunt lacus ipsum, in imperdiet felis ultricies eu. In ullamcorper risus felis, ac maximus dui bibendum vel. Integer ligula tortor, facilisis eu mauris ut, ultrices hendrerit ex. Donec scelerisque massa consequat, eleifend mauris eu, mollis dui. Donec placerat augue tortor, et tincidunt quam tempus non. Quisque sagittis enim nisi, eu condimentum lacus egestas ac. Nam facilisis luctus ipsum, at aliquam urna fermentum a. Quisque tortor dui, faucibus in ante eget, pellentesque mattis nibh. In augue dolor, euismod vitae eleifend nec, tempus vel urna. Donec vitae augue accumsan ligula fringilla ultrices et vel ex.</h5><h2 id='middle-2'>SVG support:</h2><svg id='svg1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><circle r="32" cx="35" cy="65" fill="#F00" opacity="0.5"/><circle r="32" cx="65" cy="65" fill="#0F0" opacity="0.5"/><circle r="32" cx="50" cy="35" fill="#00F" opacity="0.5"/></svg><h3>List support:</h3><ol><li>This</li><li><p>is</p></li><li>an</li><li><ul><li>With<br /><br />...</li><li>a</li><li>nested</li><li>unordered<ol style="list-style-type: lower-alpha;" start="5"><li>With a nested</li><li>ordered list</li><li>with a lower alpha list style</li><li>starting at letter e</li></ol></li><li>list</li></ul></li><li>list! Lorem ipsum dolor sit amet.</li><li><h2>Header 2</h2></li><h2 id='content2'><li>Header 2</li></h2></ol><h3>Link support:</h3><p>Linking to <a href='https://github.com'>websites</a> has never been easier.</p>
              """,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          final anchorContext =
              AnchorKey.forId(htmlKey, 'middle')?.currentContext;
          if (anchorContext != null) {
            Scrollable.ensureVisible(
              anchorContext,
            );
          }
        },
        tooltip: 'Jump',
        child: const Icon(Icons.abc),
      ),
    );
  }
}

Video demonstration

* iOS Simulator https://github.com/Sub6Resources/flutter_html/assets/74192993/0ca0e9bd-4f44-4cc4-b4a5-d901193d9fbc * Android Device(Galaxy) https://github.com/Sub6Resources/flutter_html/assets/74192993/cc2739fb-ac06-4fb8-8d0b-c45c70c18213

Sub6Resources / flutter_html

[QUESTION] Whenever I use AnchorKey.forId the scroll location is vertically off #1311

Code Sample

Video demonstration