WKContentView stops resizing on orientation change after leaving full screen

Hi,

I'm a Cordova app developer so I don't have much experience writing iOS native code. I recently enabled fullscreen API in WKWebView in our app because we needed to display some elements in full screen. This is the code I used:

[configuration.preferences setValue:[NSNumber numberWithBool:YES] forKey:@"fullScreenEnabled"];

Where the configuration variable is an instance of WKWebViewConfiguration. This works fine but after leaving the full screen mode then WKContentView stops resizing after rotating the device. E.g. if my device is in portrait mode and, after leaving full screen, I change to landscape the content of the WebView is cut-off, it doesn't fill the full screen. The parent WKWebView does adapt to the full screen according to the "Debug View Hierarchy" feature: WKWebView is 736x414, WKContentView is 414x736.

I found this SO post where they suggest using autoresizingMask and constraints equal to the parent view. I tried to do the same, this is what I tried:

[wkWebView.topAnchor constraintEqualToAnchor:UIApplication.sharedApplication.keyWindow.topAnchor].active = YES;

ButkeyWindow.topAnchor is null, and the same happens with all the superviews of WKWebView. I also tried this, but it didn't work:

wkWebView.frame = UIApplication.sharedApplication.keyWindow.bounds;

At this point I ran out of ideas. How can I fix this problem?

Here are the steps to reproduce the problem in a blank Cordova project:

  1. Create a blank Cordova project: cordova create test-resize-fullscreen com.example.helloworld HelloWorld
  2. Edit www/index.html and add an embedded Vimeo video (iframe) in the content. I guess you can use Youtube or something else too. Ours is: <iframe title="Vimeo Video" src="https://player.vimeo.com/video/34141064" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="0" width="400" height="300"></iframe>
  3. Edit the Content-Security-Policy in index.html to allow Vimeo/Youtube videos. In my case I just added "*".
  4. Edit config.xml and add this line to let the iframe load: <allow-navigation href="*" />
  5. Add the iOS platform: cordova platform add ios
  6. Edit the file "platforms/ios/CordovaLib/Classes/Private/Plugins/CDVWebViewEngine/CDVWebViewEngine.m" to enable full screen. Basically you need to add this code inside the createConfigurationFromSettings function: [configuration.preferences setValue:[NSNumber numberWithBool:YES] forKey:@"fullScreenEnabled"];
  7. Run the app in a device/simulator: cordova run ios
  8. Rotate the device, the content should adapt fine.
  9. Put the device in portrait mode and click the full screen button in the video.
  10. Leave full screen and rotate the device again. The content should no longer adapt to the screen.

Thank you!

WKContentView stops resizing on orientation change after leaving full screen
 
 
Q