Search code examples
swiftuiwebkitwkwebview

WkWebView has spacing appear after it in SwiftUI


I am having a problem where a spacing appears after the content of my WKWebView (picture included at the very bottom). I am displaying a grouping of several live streams from Facebook, but this issue keeps showing up. I have not found any solutions on Stackoverflow or other websites. My webviews are being scaled to fit in the main view as well. This is all being done in SwiftUI also and I tried adding an offset but then this added a long empty space at the bottom of the view, as expected. I appreciate any possible help because I am not exactly sure the cause of this, and I am not sure if this is a Facebook issue or something I am doing. Thank you.

Here is the code in my main body view that displays the web views:

ScrollView {
            HStack {
                Text("Most Recent Livestream")
                    .font(.title)
                    .padding([.top, .leading])
                Spacer()
            }

            VStack {
                if (self.fb.showWebViews != false) {
                    fb.getwebView(index: 0).scaledToFit()
                }
            }

            VStack {
                if (self.fb.showWebViews != false) {
                    Text("\(fb.getVideoDate(index: 1))")
                    fb.getwebView(index: 1).scaledToFit()
                }
            }

            VStack {
                if (self.fb.showWebViews != false) {
                    Text("\(fb.getVideoDate(index: 2))")
                    fb.getwebView(index: 2).scaledToFit()
                }
            }

            VStack {
                if (self.fb.showWebViews != false) {
                    Text("\(fb.getVideoDate(index: 3))")
                    fb.getwebView(index: 3).scaledToFit()
                }
            }

            VStack {
                if (self.fb.showWebViews != false) {
                    Text("\(fb.getVideoDate(index: 4))")
                    fb.getwebView(index: 4).scaledToFit()
                }
            }

            Button(action: {
                print("LEARN MORE!")
            }) {
                Image(systemName: "questionmark.circle")
                Text("Want to view more livestreams?")
                    .foregroundColor(Color(.label))
            }.padding([.top, .leading])


            Spacer()
        }

Here is the webview code:

struct WebView2 : UIViewRepresentable {
    // Instence Var of request URL
    var request: URLRequest

    // Creates the UIView of the WebView
    func makeUIView(context: Context) -> WKWebView  {

        return WKWebView()
    }

    // Updates the Webview
    /// With disable scrolling, backround becomes opaue, and reloads page with the quested URL
    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.scrollView.isScrollEnabled = false
        uiView.isOpaque = false

        uiView.load(request)
    }
}

Here is a picture of what it looks like with the spacing: Picture showing spacing after webview


Solution

  • It turned out that in order to fix this problem all I had to do was remove the .scaledToFit() on each WebView in the VStacks. Then after removing those, I then had to put .frame(height: 233) on each WebView in the VStacks in order to make then all display completly, since they always will be 233 in height.