flutter_inappwebview icon indicating copy to clipboard operation
flutter_inappwebview copied to clipboard

Content Size not updating when exiting full screen video

Open IbrahimYildirim opened this issue 1 year ago • 7 comments

Environment

Technology Version
Flutter version 3.7.6
Plugin version 6.0.0-beta.22
Android version Android 10
iOS version 16.2
macOS version 13.2
Xcode version 14.2

Device information: Apple iPhone 12 pro

Description

I have a webview where I show video. When entering and then exiting fullscreen mode for the video, the content size does not change onExitFullScreen

Expected behavior: To call onContentSizeChanged when entering and exiting full screen

Current behavior: When entering full screen: onContentSizeChanged is called "onContentSizeChanged" using {oldContentSize: {height: 219.0, width: 390.0}, newContentSize: {height: 844.0, width: 390.0}}

When exiting fullScreen onContentSizeChanged is not called Therefore when exiting the full screen and the frame gets smaller, the content size stays the same. This adds unwanted scroll effect on the video (see video for example)

https://user-images.githubusercontent.com/6585119/226324043-5cd8010a-974b-4ea4-bf9c-3d788ee850aa.mov

IbrahimYildirim avatar Mar 20 '23 11:03 IbrahimYildirim

👋 @IbrahimYildirim

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!

github-actions[bot] avatar Mar 20 '23 11:03 github-actions[bot]

bump, I'm having a similar issue.

Vis5 avatar Nov 13 '23 09:11 Vis5

I'm not able to reproduce the issue. It seems to work fine on iPhone. Probably, it also depends on the HTML and CSS of the webpage used for the video.

Could you provide a minimal code to reproduce it?

pichillilorenzo avatar Nov 14 '23 18:11 pichillilorenzo

Here is a MRE. For me, the issue is slightly different but I think the core issue is the same. Here's how to reproduce it in my example:

  1. Once the page fully loads, play the video
  2. Go fullscreen
  3. Switch to landscape mode
  4. Exit fullscreen
  5. Switch to portrait mode

When you switch back to portrait mode, the web view shows the page in the landscape width so it looks cut off in the portrait mode. Only happens with iOS, Android is working fine as expected.

EDIT: MRE removed

Vis5 avatar Nov 15 '23 02:11 Vis5

I'm having a similar issue.

Shanshi66 avatar Nov 26 '23 06:11 Shanshi66

it's similar for me

Pinkippo avatar Dec 27 '23 07:12 Pinkippo

Same here... when i'm using allowsInlineMediaPlayback = true when i exit full screen mode the content has not updating.

(I'm using an youtube embed player.)

gabriieelreeis avatar Jan 03 '24 12:01 gabriieelreeis

@Vis5 I'm still not able to reproduce the issue with your code. It just works as expected and everything has the correct width and height. I tested your code using Flutter 3.16.1 on a real iPhone. Which version of Flutter are you using?

If anyone still has this bug, please post the code used and also a screen record of it.

pichillilorenzo avatar Feb 03 '24 10:02 pichillilorenzo

Hi @Vis5 , @gabriieelreeis , @Pinkippo, @RosenX
I am also facing the same issue inside webview. We have a video player in iFrame and on Rotation and Full Screen Exit, Orientation is broken. Which version of flutter are you guys using? @pichillilorenzo I am using flutter version - Flutter 3.13.4

flutter --version Flutter 3.13.4 • channel stable • https://github.com/flutter/flutter.git Framework • revision 367f9ea16b (5 months ago) • 2023-09-12 23:27:53 -0500 Engine • revision 9064459a8b Tools • Dart 3.1.2 • DevTools 2.25.0

SumanHansada avatar Feb 13 '24 04:02 SumanHansada

I was using 3.10.x I haven't bothered to check on the latest version since then.

@pichillilorenzo I'd love to if I was still working on the project. I hope one of the other guys provide you with MRE and screen record on the latest version.

IIRC I downgraded the package to 5.x to workaround the issue.

Vis5 avatar Feb 13 '24 07:02 Vis5

Hello @SumanHansada , I'm using Flutter version 3.13.5. Unfortunately, I couldn't resolve the issue, so I've added a full-screen ban feature specifically for iOS

Pinkippo avatar Feb 13 '24 09:02 Pinkippo

We have the same issue on iOS devices & the flutter doctor is as follows: for Flutter version 3.13.4

[!] Flutter (Channel stable, 3.13.4, on macOS 14.2.1 23C71 darwin-arm64, locale en-IN)
    ! Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/2.18.4/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/pawanshahani/fvm/3.13.4. Consider adding /Users/pawanshahani/fvm/3.13.4/bin to the front of your path.
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.1)
[✓] VS Code (version 1.86.2)
[✓] Connected device (2 available)
    ! Error: Browsing on the local area network for iPhone 13. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources

! Doctor found issues in 1 category.

PawanFyers avatar Feb 21 '24 08:02 PawanFyers

Here is the video of it.. @PawanFyers, @Pinkippo, @Vis5, @gabriieelreeis , @RosenX, @pichillilorenzo

I am using the latest flutter and latest flutter_inappwebview

Flutter version using fvm:

Version Channel Flutter Version Dart Version Release Date Global
3.19.0 stable 3.19.0 3.3.0 Feb 15, 2024

flutter_inappwebview: ^6.0.0

Orientation_Issue_iOS

SumanHansada avatar Feb 21 '24 14:02 SumanHansada

is happening with me too, on iphone x with 16.4.0 ios. using flutter 3.16.0

hbedford avatar Mar 07 '24 20:03 hbedford

Here is a MRE. For me, the issue is slightly different but I think the core issue is the same. Here's how to reproduce it in my example:

  1. Once the page fully loads, play the video
  2. Go fullscreen
  3. Switch to landscape mode
  4. Exit fullscreen
  5. Switch to portrait mode

When you switch back to portrait mode, the web view shows the page in the landscape width so it looks cut off in the portrait mode. Only happens with iOS, Android is working fine as expected.

EDIT: MRE removed

I have same issue:

  • IOS 17 -> not happen
  • IOS <= 16 -> issue happen

giapmn-1380 avatar Jun 10 '24 13:06 giapmn-1380