Top of WKWebViewcontent is clipped under NSToolbar in Mac Catalyst

Question

I have a catalyst app that has a WKWebView in a UINavigationController. On iOS, I have a navigation bar above the Web View, like so:

However, on macOS, I've hidden the Navigation Bar and instead display an NSToolbar. However, the WebView's contents are clipped below the Toolbar:

(Note that after scrolling the web view down, the content is no longer clipped)

How can I set the WKWebView so that the content isn't clipped below the toolbar?

Answer 1

After playing around wit an AppKit bridge in my Catalyst app, I determined what appears to be the cause of the problem: the styleMask for Catalyst windows contains .fullSizeContentView, which is used to make the view within an NSWindow extend under the titlebar/toolbar (this is what enables the translucent toolbar in apps like Safari). For whatever reason, WKWebView doesn't deal with it properly, and that's what's causing the content to be clipped.

As a workaround, I add an observer for NSWindow.didBecomeMainNotification in a method in the AppKit bundle that runs when the app is first launched (for my use case, I'm only worrying about the main window). As a result, the following method gets called when a window becomes the app's "main" window:

    @objc func setWindow(_ sender: Notification) {
        if let w = sender.object as? NSWindow {
            if w.styleMask.contains(.fullSizeContentView){
                var sm = w.styleMask
                sm.remove(.fullSizeContentView)
                w.styleMask = sm
            }
        }
    }

This removes .fullSizeContentView from the window's styleMask, and as a result, the WKWebView's content is no longer clipped when it first appears.

I should note that the workaround isn't perfect - you won't have the translucency effect under the toolbar anymore.

If you'd like to add an AppKit Bundle to a Catalyst app, the following resources should be helpful

https://crunchybagel.com/disabling-the-mac-zoom-maximise-button-in-catalyst/ https://www.highcaffeinecontent.com/blog/20190607-Beyond-the-Checkbox-with-Catalyst-and-AppKit

If you're still confused, I recommend playing with the demo project below that I found: https://github.com/noahsark769/CatalystPlayground