Scrollview and a background image set to scaledToFill....

I've been beating my head against the wall over a scrollview issue where the top and bottom are cut off in landscape mode. Portrait mode - everything runs swimmingly. The moment I flip the iPad on its side, though, I lose about a quarter of the view on the top and bottom. I thought this was something to do with framing or such; I ran through a myriad of frame, padding, spacer, geometry...I set it static, I set it to dynamically grow, I even created algorithms to try to figure out how to set things to the individual device. Eventually, I separated the tablet and phone views as was suggested here and on the Apple dev forums. That's when I started playing around with the background image. Right now I have....

ZStack {
Image("background")
.resizable()
.scaledToFill()
.ignoresSafeArea()
ScrollView {
VStack(spacing: 24) {....

The problem is the "scaledToFill". In essence, whenever THAT is in the code, the vertical scrollview goes wonky in landscape mode. It, in essence, thinks that it has much more room at the top and the bottom because the background image has been extended at top and bottom to fill the wider screen of the iPad in landscape orientation. Is there any way to get around this issue? The desired behavior is pretty straightforward - the background image fills the entire background, no white bars or such, and the view scrolls against it.

I think you're looking for something like this:

import SwiftUI
struct ContentView: View {
var body: some View {
ScrollView {
VStack(spacing: 24) {
ForEach(1..<20) { i in
Text("Line \(i)")
}
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(
Image("background")
.resizable()
.scaledToFill()
.ignoresSafeArea()
)
}
}
#Preview {
ContentView()
}

The main difference is that my code adds a background to the ScrollView rather than putting everything on top of an image via a ZStack.

When you do it your way, you've kind of told everything on top of that layer how big they'll be, which is why your ScrollView is distorted, and bits of it disappear off the screen.

Well…I thought so too. Problem was - it wouldn’t scale to fill horizontally, no matter where I attached it.

After ALL that, I ended up with this….

var body: some View {
GeometryReader { geo in
ZStack {
Image("background")
.resizable()
.scaledToFill()
.frame(width: geo.size.width, height: geo.size.height)
.ignoresSafeArea()
ScrollView {
VStack(spacing: 32) {

That doesn't work for me, depending on the background image used.

While my example worked fine with three different images (square, portrait, and landscape images), your new version doesn't work for my landscape image. I get a white area to the right when the Simulator/Preview is in Landscape Left.

If you don't need to use an image, you could use a plain colour or a gradient:

let gradient: LinearGradient = LinearGradient(gradient: Gradient(colors: [Color.init(red: 200.0/255.0, green: 200.0/255.0, blue: 250.0/255.0), Color.init(red: 125.0/255.0, green: 125.0/255.0, blue: 175.0/255.0)]), startPoint: .top, endPoint: .bottom)
struct ContentView: View {
var body: some View {
ZStack {
gradient
.ignoresSafeArea()
ScrollView {
VStack(spacing: 32) {
ForEach(1..<20) { i in
Text("Line \(i)")
}
}
}
}
}
}

Just an idea. Don't have to do everything I say 😄

Scrollview and a background image set to scaledToFill....
 
 
Q