Repository: flutter
Issue: Hero animation causes parent PageView to partially scroll into next page.
Labels: framework,a: animation,f: material design,has reproducible steps,found in release: 2.10,found in release: 2.13,team-design,triaged-design

<!-- Thank you for using Flutter!

     If you are looking for support, please check out our documentation
     or consider asking a question on Stack Overflow:
      * https://flutter.dev/
      * https://api.flutter.dev/
      * https://stackoverflow.com/questions/tagged/flutter?sort=frequent

     If you have found a bug or if our documentation doesn't have an answer
     to what you're looking for, then fill out the template below. Please read
     our guide to filing a bug first: https://flutter.dev/docs/resources/bug-reports
-->

## Steps to Reproduce

1. Place a PageView inside a Flutter app
2. Inside that PageView, somewhere in the tree, wrap some widget with `Hero` widget.
3. On another page, add another `Hero` widget with the same `tag`.
4. Make the widget from step 2 open the page from step 3 on tap (or something similar). The widgets should try to connect via Hero animations
5. Attempt to use that transition in debug/production mode - the bug will be visible

### To see in example:

1. Execute `flutter run` on the code sample
6. Click the button in the middle, "Open"
7. Watch as the Hero transition causes the pageView to scroll halfway before disappearing.

The part where the background disappears doesn't happen on my actual app, only in this example. However, the half-way scrolling happens in both.

This reproduces only on web platform. Android is working as expected, and other platforms were not tested yet.

| Expected result | Actual Result |
| --- | --- |
| ![bug-mobile](https://user-images.githubusercontent.com/167217/159960112-44b28d74-dfdc-45a5-afcc-3934308d07ec.gif) | ![bug-web](https://user-images.githubusercontent.com/167217/159960173-7d0f6153-56af-4baa-bb4e-ea2cc09531ea.gif) |
| - | ![Screen Recording 2022-03-24 at 18 08 18](https://user-images.githubusercontent.com/167217/159960380-ed9e658a-43f0-4ae6-8c48-039de4cea5a2.gif) |




<details>
<summary>Code sample</summary>

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final controller = PageController(initialPage: 1);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: PageView(
        controller: controller,
        children: [
          Container(color: Colors.blue),
          Container(
            color: Colors.red,
            child: Center(
              child: Hero(
                tag: 'test',
                child: ElevatedButton(
                  child: const Text("Open"),
                  onPressed: () => Navigator.of(context).push(
                    MaterialPageRoute(builder: (ctx) => const OtherPage()),
                  ),
                ),
              ),
            ),
          ),
          Container(color: Colors.yellow),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (idx) => controller.animateToPage(
          idx,
          duration: const Duration(milliseconds: 500),
          curve: Curves.easeInOut,
        ),
        items: const [
          BottomNavigationBarItem(icon: Text('1'), label: ''),
          BottomNavigationBarItem(icon: Text('2'), label: ''),
          BottomNavigationBarItem(icon: Text('3'), label: ''),
        ],
      ),
    );
  }
}

class OtherPage extends StatelessWidget {
  const OtherPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: GestureDetector(
        onTap: () => Navigator.of(context).pop(),
        child: Container(
          color: Colors.black.withOpacity(0.75),
          padding: const EdgeInsets.all(32),
          child: const Center(
            child: Hero(
              tag: 'test',
              child: Card(
                child: Text('Test'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
```

</details>

<details>
  <summary>Logs</summary>

Content was too long, added as gist [here](https://gist.github.com/chenasraf/f044b1be96f49cc5291c4ba9b6cf21f1).

<!--
     Run `flutter analyze` and attach any output of that command below.
     If there are any analysis errors, try resolving them before filing this issue.
-->

```
Analyzing flutter_hero_bug_sample...                                    
No issues found! (ran in 3.2s)
```

<!-- Finally, paste the output of running `flutter doctor -v` here. -->

```
[✓] Flutter (Channel beta, 2.12.0-4.1.pre, on macOS 12.2.1 21D62 darwin-arm, locale en)
    • Flutter version 2.12.0-4.1.pre at /Users/chen/.flutter-src
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 680962aa75 (8 days ago), 2022-03-16 13:46:03 -0700
    • Engine revision e9f57b5d0f
    • Dart version 2.17.0 (build 2.17.0-182.1.beta)
    • DevTools version 2.11.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/chen/Library/Android/sdk
    • Platform android-31, build-tools 32.1.0-rc1
    • ANDROID_HOME = /Users/chen/Library/Android/sdk
    • ANDROID_SDK_ROOT = /opt/homebrew/bin
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS (Xcode 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ✗ CocoaPods installed but not working.
        You appear to have CocoaPods installed but it is not working.
        This can happen if the version of Ruby that CocoaPods was installed with is different from the one being used to invoke it.
        This can usually be fixed by re-installing CocoaPods.
      To re-install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.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 11.0.11+0-b60-7772763)

[✓] VS Code (version 1.65.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.36.0

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 99.0.4844.83

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.
```

</details>