0

Using WKWebview the content of the webview gets pushed down, and it doesn't readjust when it scrolls out of the view. I feel this is somewhat website specific, because some do, but at the same time it shouldn't be up to the website to fill the view or not I think, and in this example it always starts off correctly, filling up the entire space.

I set the background color of the webview to cyan, so the issue is easier to see. The issue appears first after scrolling past the views, that are rendered at the beginning. See below picture for the good position (starting position): Good layout example

And once I scroll down to a section that wasn't shown at start, the cyan lines appear: enter image description here

Also funny thing I noticed, after taking screenshots the views rerenders themselves and the cyan lines disappear from that section.

I made a minimal example that showcases this issue. The start view and the UIViewControllerRepresentable:

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack (alignment: .leading){
                ForEach(0..<10) { x in
                        WebWrapper()
                            .frame(width: 450, height: 450)
                }
            }
        }
    }
}


struct WebWrapper : UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> WebViewController {
        return WebViewController(link: "https://play.grafana.org/d-solo/000000012/grafana-play-home?orgId=1&refresh=5s&panelId=4")
        //return WebViewController(link: "https://apple.com")
    }
    
    func updateUIViewController(_ uiViewController: WebViewController, context: Context) {
        print("Update UI view controller called")
    }

And the webviewcontroller is as follows:

import UIKit
import WebKit

class WebViewController: UIViewController, WKNavigationDelegate {
    var request : URLRequest
    var webview : WKWebView
    
    init(link : String) {
        self.webview = WKWebView(frame: .zero)
        webview.underPageBackgroundColor = .cyan
        
        let final = URL(string: link) ?? URL(string: "https://apple.com")!
        request = URLRequest(url: final)
        
        super.init(nibName: nil, bundle: nil)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) is not supported")
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view = UIView()
        view.addSubview(webview)
        webview.navigationDelegate = self
        webview.load(self.request)
    }
    
    override func viewDidLayoutSubviews() {
        print("Sub layout success")
        setConstraints()
        //webview.frame = self.view.bounds
        //webview.contentMode = .scaleToFill
        //webview.sizeToFit()
    }
    
    ///Making the view full screen
    func setConstraints(){
        webview.translatesAutoresizingMaskIntoConstraints = false
        webview.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0).isActive = true
        webview.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0).isActive = true
        webview.topAnchor.constraint(equalTo: view.topAnchor, constant: 0).isActive = true
        webview.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0).isActive = true
    }
}

As you can see in the viewDidLayoutSubviews I tried many of the suggested solutions.

harcipulyka
  • 117
  • 1
  • 6

0 Answers0