title: SwiftUI: WKWebView Cutting Off Page Content on macOS (NSViewRepresentable)
body: <p>I have a basic <code>NSViewRepresentable</code> implementation of <code>WKWebView</code>, for use with SwiftUI apps on macOS. The <code>UIViewRepresentable</code> equivalent works fine on iOS, but on macOS (natively, not Catalyst), the top content is always cut off.</p>
  
  <p>The amount lost always equals the size of parent views (such as the tab view) and their padding, which indicates that the web view keeps scaling its content to the <em>window</em> size, rather than the <em>view</em> size.</p>
  
  <p>For example, this page:</p>
  
  <p><a href="https://i.stack.imgur.com/zrqz0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zrqz0.png" alt="Cut Off Web Content"></a></p>
  
  <p>...should be as follows (as shown in Chrome). The entire navigation bar has been cropped out (though the sides appear not to be affected).</p>
  
  <p><a href="https://i.stack.imgur.com/Q20Ng.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Q20Ng.png" alt="Chrome Version Rendering Correctly"></a></p>
  
  <p>Any suggestions on how to fix this? Interestingly, if I switch back &amp; forth between tabs, the content shows correctly for ~1 second, then resizes the content so it's cut off again. This makes me think something's required in the <code>updateNSView</code> method, but I'm not sure what.</p>
  
  <p>Seems to be a similar issue to the one discussed <a href="https://stackoverflow.com/questions/58367393/wkwebview-on-macos-cuts-off-top">here</a>, but that's for IB-based apps, and I can't see a way to apply it for SwiftUI.</p>
  
  <p>The code used is as follows. Note: The web view is kept as a property so it can be referenced by other methods (such as triggering page load, refresh, go back, etc.)</p>
  
  <pre><code>public struct WebBrowserView {
  
      private let webView: WKWebView = WKWebView()
  
      // ...
  
      public func load(url: URL) {        
          webView.load(URLRequest(url: url))
      }
  
      public class Coordinator: NSObject, WKNavigationDelegate, WKUIDelegate {
  
          var parent: WebBrowserView
  
          init(parent: WebBrowserView) {
              self.parent = parent
          }
  
          public func webView(_: WKWebView, didFail: WKNavigation!, withError: Error) {
              // ...
          }
  
          public func webView(_: WKWebView, didFailProvisionalNavigation: WKNavigation!, withError: Error) {
              // ...
          }
  
          public func webView(_: WKWebView, didFinish: WKNavigation!) {
              // ...
          }
  
          public func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
              // ...
          }
  
          public func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -&gt; Void) {
              decisionHandler(.allow)
          }
  
          public func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -&gt; WKWebView? {
              if navigationAction.targetFrame == nil {
                  webView.load(navigationAction.request)
              }
              return nil
          }
      }
  
      public func makeCoordinator() -&gt; Coordinator {
          Coordinator(parent: self)
      }
  }
  
  
  #if os(macOS) // macOS Implementation (iOS version omitted for brevity)
  extension WebBrowserView: NSViewRepresentable {
  
      public typealias NSViewType = WKWebView
  
      public func makeNSView(context: NSViewRepresentableContext&lt;WebBrowserView&gt;) -&gt; WKWebView {
  
          webView.navigationDelegate = context.coordinator
          webView.uiDelegate = context.coordinator
          return webView
      }
  
      public func updateNSView(_ nsView: WKWebView, context: NSViewRepresentableContext&lt;WebBrowserView&gt;) {
  
      }
  }
  #endif
  </code></pre>
  
  <p>Example usage:</p>
  
  <pre><code>struct BrowserView: View {
  
      private let browser = WebBrowserView()
  
      var body: some View {
          HStack {
              browser
                  .onAppear() {
                      self.browser.load(url: URL(string: "https://stackoverflow.com/tags")!)
                  }
          }
          .padding()
      }
  }
  
  struct ContentView: View {
  
      @State private var selection = 0
  
      var body: some View { 
          TabView(selection: $selection){
              Text("Email View")
                  .tabItem {
                      Text("Email")
                  }
                  .tag(0)
              BrowserView()
                  .tabItem {
                      Text("Browser")
                  }
                  .tag(1)
          }
          .padding()
      }
  }
  </code></pre>