WKWebView on macOS cuts off top

Question

I placed a WKWebView inside a NSView with a y coordinate > 0. After loading a page (no matter which one) it either immediately cuts off the top or it shows the top for a second and then jumps down the page (by doing so cutting off the top).

What's more is that when I scroll up I get a glimpse of the top portion but it bounces back not allowing me to actually scroll to the very top.

No changes have been made to the WKWebView. What I noticed is, that the smaller y the smaller the portion which is cut off.

The WKWebView has been added via the Interface Builder.

How can I make the WKWebView show the top of the website? I'm using Swift.

This is what it looks like:

This is what the actual website looks like (notice the visible navigation section):

Answer 1

Okay, I had the same problem as you! Check your view's frame on construction and, if it's not starting at 0,0, make sure that the parent view doesn't auto resize the subviews. I tried to keep my code sample to the bare minimum. (note that webConfig.AllowsAirPlayForMediaPlayback isn't required in this sample)

Here's a working example. You can switch the view to be full frame in the window or positioned as a smaller view in the parent. I set the window to be 1024x768 in IB.

You can easily convert this code to Swift.

The key is to not autoresize the subviews if the view is being placed at an offset other than 0,0.

quick sample:

//#define USE_FULL_WINDOW // uncomment this to fit webview full window

using System;
using AppKit;
using Foundation;
using WebKit;
using CoreGraphics;
using System.Diagnostics;

namespace WkWebTest
{
    public class MediaView : NSView
    {
        private WKWebView webView;

        public MediaView(CGRect frame)
            : base(frame)
        {
#if USE_FULL_WINDOW
            this.AutoresizesSubviews = true;
            this.AutoresizingMask = NSViewResizingMask.HeightSizable | NSViewResizingMask.WidthSizable;
#endif

            WKWebViewConfiguration webConfig = new WKWebViewConfiguration();
            webConfig.AllowsAirPlayForMediaPlayback = true;
            this.webView = new WKWebView(new CGRect(0, 0, frame.Width, frame.Height), webConfig);
            this.webView.AutoresizesSubviews = true;
            this.webView.AutoresizingMask = NSViewResizingMask.HeightSizable | NSViewResizingMask.WidthSizable;
            this.AddSubview(this.webView);

            string url = "http://www.apple.com";
            Debug.WriteLine("LoadUrl: " + url);
            var request = new NSUrlRequest(new NSUrl(url));
            this.webView.LoadRequest(request);
        }

        public override bool IsFlipped { get { return true; } }
    }

    public partial class ViewController : NSViewController
    {
        private MediaView mediaView;

        public ViewController(IntPtr handle) : base(handle)
        {
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

#if USE_FULL_WINDOW
            float mediaViewLeft = 0;
            float mediaViewTop = 0;
            nfloat mediaViewWidth = View.Frame.Width;
            nfloat mediaViewHeight = View.Frame.Height;
#else
            float mediaViewLeft = 511;
            float mediaViewTop = 112;
            nfloat mediaViewWidth = 475;
            nfloat mediaViewHeight = 548;
#endif
            this.mediaView = new MediaView(new CGRect(mediaViewLeft, mediaViewTop, mediaViewWidth, mediaViewHeight));
            this.View.AddSubview(mediaView);
        }

// boiler plate code generated by Xamarin
        public override NSObject RepresentedObject
        {
            get
            {
                return base.RepresentedObject;
            }
            set
            {
                base.RepresentedObject = value;
                // Update the view, if already loaded.
            }
        }
    }
}