aspectRatio bug

[J0ker98]

Issue Info

Info	Value
Platform Name	ios
Platform Version	13.4
SDWebImageSwiftUI Version	latest
Integration Method	cocoapods
Xcode Version	Xcode 11
Repro rate	all the time (100%)

Issue Description and Steps

I'm using SDWebImage in SwiftUI and when I have two images, one with .aspectRatio(contentMode: .fit) and another with .aspectRatio(contentMode: .fill), the second image aspectRatio is not being set correctly.

Before: https://ibb.co/DKfD861 After: https://ibb.co/sb4mwvj

[dreampiggy]

one with .aspectRatio(contentMode: .fit) and another with .aspectRatio(contentMode: .fill), the second image aspectRatio is not being set correctly.

Can you provide some simple code to reproduce this problem ?

SwiftUI use componnets, so it's easy to simulate the same View Structure with the sample code.

[dreampiggy]

And again, please provide whether you use WebImage or AnimatedImage.

They use totally different layout system (SwiftUI or UIKit), which may behave differently because of some Apple's internel bugs or behaviors.

[J0ker98]

Ok, here's a sample code. This is not causing the exact same thing but if you run it, you can see that if you change the top image aspectRatio to .fill, the bottom images aspectRatio gets changet to .fill to instead of remaining to .fit

import SwiftUI
import SDWebImageSwiftUI

struct ContentView: View {

    var images: [String] = ["https://www.outpump.com/wp-content/uploads/2020/05/outpump-travis-scott-lebron-james-graduate-together-tee-shirt-collab-cactus-jack-2-400x266-c-default.jpg", "https://www.outpump.com/wp-content/uploads/2020/04/7-eleven-nike-sb-dunk-release-outpump-400x266-c-default.jpg", "https://www.outpump.com/wp-content/uploads/2020/05/Ben-and-Jerrys-Nike-SB-Dunk-Low-Chunky-Dunky-CU3244-100-Release-Date-Price-3-outpump-400x266-c-default.jpg"]

    var body: some View {
        NavigationView {
            VStack {

                //TOP IMAGE
                HStack {
                    Spacer()
                    VStack {
                        Button(action: {
                            guard let url = URL(string: "https://www.google.com"),
                                UIApplication.shared.canOpenURL(url) else {
                                return
                            }
                            UIApplication.shared.open(url, options: [:], completionHandler: nil)
                        }) {
                            AnimatedImage(url: URL(string: "https://www.outpump.com/wp-content/uploads/2019/12/Composizione-8-min.gif")!)
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(idealWidth: 300, maxWidth: UIScreen.main.bounds.size.width - 30, idealHeight: 250, maxHeight: 250, alignment: .center)
                                .clipped()
                        }
                    }
                    Spacer()
                }

                //BOTTOM IMAGES
                VStack(alignment: .leading) {
                    Divider()

                    Text("OTHER")
                        .bold()
                        .font(.system(size: 20))

                    ForEach(self.images.map { $0 }, id: \.self) { image in
                        NavigationLink(
                            destination: Text("Hello")
                        ) {
                            VStack {
                                HStack {
                                    WebImage(url: URL(string: image)!)
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .frame(maxWidth: 120, idealHeight: 100, maxHeight: 100, alignment: .leading)
                                        .clipped()

                                    Text("LOREM IPSUM")
                                        .font(.system(size: 15))
                                        .bold()
                                        .multilineTextAlignment(.leading)
                                        .fixedSize(horizontal: false, vertical: true)

                                    Spacer()

                                    Image(systemName: "chevron.right")
                                        .foregroundColor(Color.gray)

                                }

                                Divider()
                            }
                        }
                        .buttonStyle(PlainButtonStyle())
                    }
                }
                .padding(.horizontal)
            }
        }
    }
} 

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

[dreampiggy]

After I run the sample code. This looks like SwiftUI layout system result.

Because you don't limit the HStack of top image either bottom image, SwiftUI will try to layout it based on the inner View bounds size.

Add one line here:

//TOP IMAGE
HStack {
    // ...
}
Spacer()
//BOTTOM IMAGES
VStack(alignment: .leading) {
}

Or, you can use .frame to limit the VStack && HStack.

Sounds not related to SDWebImageSwiftUI itself...You can get the exact same behavior when you replace all your WebImage AnimatedImage into a Rectangle()

[J0ker98]

Ok, thanks for the clarification! Keep up the good work on the lib :) 👍

[dreampiggy]

See changing all WebImage && AnimatedImage into Rectangle.

[dreampiggy]

So I just close this issue ? If you find new question, you can reopen this one. :)