Repository: flutter
Issue: Severe VideoPlayer rendering issue while scrolling in Safari browser
Labels: platform-web,p: video_player,package,c: rendering,e: web_canvaskit,has reproducible steps,browser: safari-macos,P2,e: web_skwasm,team-web,triaged-web,found in release: 3.27,found in release: 3.28

### Steps to reproduce

1. Create a `CustomScrollView` wrap a `VideoPlayer` in a `Container` with a `clipBehavior` other then `Clip.none`.
2. Run on a iOS browser (tested on iPad and iPhone on either safari or chrome)
3. When scrolling up or down the video is clipped like if the video is not scrolling with the widget, then move back inplace after a few frames.

tested with:
video_player: ^2.9.2

### Expected results

The video should smoothly scroll with the widget inside the `CustomScrollView`

### Actual results

The video is lagging behind the scroll. The rate at which the video come back inplace is not the same when I unfocus then focus the window.
See videos below.


### Code sample

<details open><summary>Code sample</summary>

```dart
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Test',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  VideoPlayerController? _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Test'),
      ),
      body: _controller == null
          ? const Center(child: CircularProgressIndicator())
          : CustomScrollView(
              slivers: [
                const SliverToBoxAdapter(
                  child: SizedBox(
                    height: 400,
                  ),
                ),
                SliverToBoxAdapter(
                  child: Container(
                    height: 300,
                    alignment: Alignment.center,
                    decoration: const BoxDecoration(),
                    clipBehavior: Clip.hardEdge,
                    child: VideoPlayer(_controller!),
                  ),
                ),
                const SliverToBoxAdapter(
                  child: SizedBox(
                    height: 600,
                  ),
                ),
              ],
            ),
    );
  }

  @override
  void initState() {
    final controller = VideoPlayerController.networkUrl(
      Uri.parse('http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'),
      videoPlayerOptions: VideoPlayerOptions(
        webOptions: const VideoPlayerWebOptions(
          controls: VideoPlayerWebOptionsControls.enabled(
            allowDownload: false,
          ),
        ),
      ),
    );
    controller.initialize().then((_) {
      setState(() {
        _controller = controller;
      });
    });
    super.initState();
  }
}

```

</details>


### Screenshots or Video

<details open>
<summary>Screenshots / Video demonstration</summary>


https://github.com/user-attachments/assets/460c66b5-3963-4396-a17f-6d149c76d6ef


https://github.com/user-attachments/assets/9a375f0d-31b7-4fb9-8940-ae1f2180d452



</details>


### Logs

<details open><summary>Logs</summary>

```console
Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...
This app is linked to the debug service: ws://127.0.0.1:43277/RdUjfbZDybY=/ws
Debug service listening on ws://127.0.0.1:43277/RdUjfbZDybY=/ws
Debug service listening on ws://127.0.0.1:43277/RdUjfbZDybY=/ws
```

</details>


### Flutter Doctor output

<details open><summary>Doctor output</summary>

```console
[!] Flutter (Channel [user-branch], 3.24.3, on Ubuntu 22.04.5 LTS 6.8.0-49-generic, locale en_US.UTF-8)
    ! Flutter version 3.24.3 on channel [user-branch] at /home/ortes/flutter
      Currently on an unknown channel. Run `flutter channel` to switch to an official channel.
      If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/setup.
    ! Upstream repository unknown source is not a standard remote.
      Set environment variable "FLUTTER_GIT_URL" to unknown source to dismiss this error.
    • Framework revision 2663184aa7 (3 months ago), 2024-09-11 16:27:48 -0500
    • Engine revision 36335019a8
    • Dart version 3.5.3
    • DevTools version 2.37.3
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /home/ortes/Android/Sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /home/ortes/.local/share/JetBrains/Toolbox/apps/android-studio/jbr/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • Ubuntu clang version 14.0.0-1ubuntu1.1
    • cmake version 3.22.1
    • ninja version 1.10.1
    • pkg-config version 0.29.2

[✓] Android Studio (version 2024.1)
    • Android Studio at /home/ortes/.local/share/JetBrains/Toolbox/apps/android-studio
    • Flutter plugin version 83.0.2
    • 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 /usr/share/code
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Ubuntu 22.04.5 LTS 6.8.0-49-generic
    • Chrome (web)    • chrome • web-javascript • Google Chrome 131.0.6778.108

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
```

</details>