iosswiftswiftuiwkwebview

WKWebView Scroll Padding at top and bottom


I am a newbie to iOS development and I'm trying to load a website using WKWebView. However, I get an unexpected margin at the top of the view. When I scroll through the webpage, the margin gets filled, but when I reach the end of the page, the same gap appears at the bottom. I tried edgesIgnoringSafeArea(.all) but still the same issue.

How can I make the WebView entirely fullscreen?

Here is the code:

import SwiftUI

struct ContentView: View {
    var body: some View {
        WebView(url: URL(string: "https://google.com")!)
            .edgesIgnoringSafeArea(.all) // Makes the WebView full-screen
    }
}


#Preview {
    ContentView()
}
import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {
    let url: URL
    
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        webView.allowsBackForwardNavigationGestures = true
        webView.scrollView.isScrollEnabled = true
        webView.scrollView.backgroundColor = .red
        return webView
    }
    
    func updateUIView(_ webView: WKWebView, context: Context) {
        let request = URLRequest(url: url)
        webView.load(request)
    }
}

enter image description here

enter image description here


Solution

  • The top and bottom paddings are safe area paddings. If you want to remove the safe area from the web view, add the below code to your web view initialization

    webView.scrollView.contentInsetAdjustmentBehavior = .never