I have created a WKWebView as a UIViewRepresentable in a SwiftUI app with SwiftUI life cycle. It works for content. However, when I start the app in iPad landscape and rotate to portrait the right side of the view is truncated. I have attempted to scale the webview based on other code which (correctly) detects portrait or landscape but this does not work. Strangely, if I start with iPad portrait, the view is complete in both orientations with no scale modification.
I looked at SO 61832221 and https://developer.apple.com/forums/thread/130878 among others but none of the concepts worked for me.
Here is the webview:
struct MyWebView: UIViewRepresentable {
typealias UIViewType = WKWebView
let url: URL?
func makeUIView(context: Context) -> WKWebView {
let prefs = WKWebpagePreferences()
prefs.allowsContentJavaScript = true
let config = WKWebViewConfiguration()
config.defaultWebpagePreferences = prefs
return WKWebView(frame: .zero, configuration: config)
}
func updateUIView(_ uiView: WKWebView, context: Context) {
guard let myURL = url else { return }
let request = URLRequest(url: myURL)
uiView.load(request)
}
}//struct
And the implementation:
struct USNetGenerationByMonthView: View, SizeClassAdjustable {
@Environment(\.verticalSizeClass) var _verticalSizeClass
@Environment(\.horizontalSizeClass) var _horizontalSizeClass
var verticalSizeClass: UserInterfaceSizeClass? { _verticalSizeClass }
var horizontalSizeClass: UserInterfaceSizeClass? { _horizontalSizeClass }
var body: some View {
NavigationView {
GeometryReader { geo in
VStack {
MyWebView(url: URL(string: "https://www.catalpa.com/usnetgeneration"))
.navigationTitle("US Net Generation by Month")
//.scaleEffect(isPadPortrait ? 0.8 : 1.0)
Text("Tap a series for detail")
.padding(.bottom, 50)
//for testing - hide this
HStack {
Text(isPadPortrait ? "Portrait" : "Landscape")
Text("Width is \(geo.size.width)")
}//.hidden()
}
}
}.navigationViewStyle(StackNavigationViewStyle())
}//body
}//struct
For reference, this is the logic for determining orientation.
protocol SizeClassAdjustable {
var verticalSizeClass: UserInterfaceSizeClass? { get }
var horizontalSizeClass: UserInterfaceSizeClass? { get }
}
extension SizeClassAdjustable {
var isPad: Bool {
return horizontalSizeClass == .regular && verticalSizeClass == .regular
}
var isPadLandscape: Bool {
isPad && (UIScreen.main.bounds.height < UIScreen.main.bounds.width)
}
var isPadPortrait: Bool {
isPad && (UIScreen.main.bounds.height > UIScreen.main.bounds.width)
}
var isPadOrLandscapeMax: Bool {
horizontalSizeClass == .regular
}
var isLandscapeMax: Bool {
horizontalSizeClass == .regular && verticalSizeClass == .compact
}
var isLandscape: Bool {
verticalSizeClass == .compact
}
var isPortrait: Bool {
verticalSizeClass == .regular && horizontalSizeClass == .compact
}
}//extension
Any guidance would be appreciated. Xcode 12.5, iOS 14.5