Bug: Safari, Video Player does not work

[ollyde]

``Flutter 3.3.10```

Working on other browsers Chrome, Firefox, Edge etc.

On Safari we get the following effect:

https://user-images.githubusercontent.com/6940726/209938894-391d0292-56e3-48b8-9ca8-6a16f865bb60.mov

[ollyde]

Fix was just pushed out might, be related to new bug: https://github.com/flutter/engine/pull/35948

[exaby73]

@ollydixon Hello. Can you try with the master channel of Flutter and see if it reproduces?

[ollyde]

@exaby73 sure, I will soon. I managed to narrow the bug down. It's when you have two clip-rects up the widget tree.

[exaby73]

If it still reproduces in master, please provide a complete and minimal, reproducible example so that I may verify it on my end :)

[ollyde]

@exaby73 yes just writing a small app to replicate it, strange thing is I'm having trouble replicating it. Something far up the widget tree in my app is causing the issue. Just isolating it. :-)

[exaby73]

Take your time, but do try to provide that sample. It will help the team (or any other contributor) narrow down the issue when they do eventually pick it up

[ollyde]

@exaby73 yes it's on my list to try to debug again, might take a bit of time :-)

[github-actions[bot]]

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones. Thanks for your contribution.

[MaksGinger]

@ollyde Hi, I'm facing the similar issue with videos in Safari. Have you found any workaround?

[ollyde]

@MaksGinger I had to get rid of rounding on some boxes only for Safari, I couldn't find the issue specially.

[huycozy]

@ollyde I checked this on video_player sample code but didn't see the issue on the Safari. Verified on video_player: ^2.5.2.

Demo

https://user-images.githubusercontent.com/104349824/222108180-9732b3a1-1bbb-4431-a58d-833a2d5c1258.mov

What is your plugin version? Please provide a completed and minimal reproducible code sample so that we may verify this. Also, please provide the output of flutter doctor -v as well.

Thank you!

[MaksGinger]

Hello, @huycozy! I've created a reproducible code https://gist.github.com/MaksGinger/76a0ca16d8f30f17aa4bbb3d52ab0bda I have video_player: ^2.5.2. This is my flutter doctor -v output: `flutter doctor -v [✓] Flutter (Channel stable, 3.7.5, on macOS 13.2.1 22D68 darwin-arm64, locale en-RU) • Flutter version 3.7.5 on channel stable at /Users/maksimilianyakovlev/Development/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision c07f788888 (6 days ago), 2023-02-22 17:52:33 -0600 • Engine revision 0f359063c4 • Dart version 2.19.2 • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/maksimilianyakovlev/Library/Android/sdk • Platform android-33, build-tools 31.0.0 • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866) • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14B47b • CocoaPods version 1.11.3

[✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.3) • 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.13+0-b1751.21-8125866)

[✓] IntelliJ IDEA Community Edition (version 2021.2.2) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin version 63.3.3 • Dart plugin version 212.5744

[✓] VS Code (version 1.75.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.42.0

[✓] Connected device (2 available) • macOS (desktop) • macos • darwin-arm64 • macOS 13.2.1 22D68 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 110.0.5481.177

[✓] HTTP Host Availability • All required HTTP hosts are available

• No issues found!`

https://user-images.githubusercontent.com/32202184/222132528-9300a192-e56a-4728-b6ab-acf1e40d7d6c.mov

[huycozy]

Thank @MaksGinger for providing the sample code. But as far as I can see, the issue is caused by ClipRRect and when I going further with it, it is related to canvaskit renderer as it doesn't reproducible with html renderer.

Demo video (no ClipRRect widget, canvaskit renderer ✅)

https://user-images.githubusercontent.com/104349824/223025252-92aa372c-bdac-48a6-9a0a-5314046d14cc.mov

Demo (with ClipRRect, html renderer ✅)

https://user-images.githubusercontent.com/104349824/223025366-c5f12d6e-1146-41f8-905e-b1b119bf16e2.mov

✅: No Issue ❌: Issue reproduced

And it seems to be hitting https://github.com/flutter/flutter/issues/79550. Please try on html render and check the linked issues.

[ollyde]

@huycozy html render is not an option on Safari, it breaks loads of other features (like even icons don't work)

[huycozy]

@ollyde I know building on a specific render is not a solution, but I just to check and find the closest related issue (if any) to this issue. Can you please confirm the result from the preliminary investigation above?

[ollyde]

@huycozy switching to HTML rendering doesn’t address this issue; of it works (I tried before posting this ticket)

[MaksGinger]

@huycozy , Yes, you're right html rendering works, but it would be nice to have the ability to use ClipRRect with video player on Safari using canvaskit. So waiting patiently for this https://github.com/flutter/flutter/issues/79550 to be solved

[ollyde]

There was a @MaksGinger a push 2 hot fixes ago to fix it. But this is a rare edge case with scrolling. I'm scrolling with ClipRRect on Safari and it works on 99% of the platform, just one screen !

[huycozy]

@ollyde I'm not sure I can understand your above comment. Can you be more specific on it and provide a recorded video for the issue (to better visualize the problem)? (It should be reproducible on a minimal sample as @MaksGinger provided above)

[ollyde]

@huycozy MaksGinger has provided an sample.

[huycozy]

@MaksGinger confirmed the HTML renderer worked as mentioned at https://github.com/flutter/flutter/issues/117777#issuecomment-1456117843. Once you believe the HTML renderer doesn't work for your case, please provide more information so that we may verify the issue.

To be more precise, please provide the information indicated below:

• The output of flutter doctor -v (please retry on the latest stable and master channels)
• Safari browser version
• A recorded video of the issue would be appreciated

[ollyde]

@huycozy I'm not sure what you're going on about, this bug has nothing to do with the HTML renderer which isn't viable for Safari websites created in Flutter.

Canvaskit is how developers deploy Safari apps which is where the bug is :-)

I've already mentioned before that I was unable to isolate the bug, and don't have time at the moment :-)

[huycozy]

@ollyde What I'm trying to do is isolate the issue. As I mentioned above at https://github.com/flutter/flutter/issues/117777?notification_referrer_id=NT_kwDOBjhAgLQ1MjAxMDE0NjkyOjEwNDM0OTgyNA#issuecomment-1455476469, this issue is caused by canvaskit renderer. Also, confirming this can be worked on HTML to make sure this issue is related to (or duplicate of) https://github.com/flutter/flutter/issues/79550. And we should follow up on that issue (also add a comment there on this case) to help raise the issue.

For more detail, please see how video_player is built in Web: https://github.com/flutter/packages/blob/main/packages/video_player/video_player_web/lib/video_player_web.dart

Hope this will be clearer.

[github-actions[bot]]

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones. Thanks for your contribution.

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.