SwiftUI have some offset on iOS 14.4 simulator

[arkulpaKonstantin]

Hello everyone,

I noticed today that the snapshots produced by the iOS 14.4 simulator have an incorrect offset on the top.

To test this I created a completely new project with minimum deployment target of iOS 13, added the SnapshotTesting package via the swift package manager to the test target and copied the testSwiftUIView_iOS test from SnapshotTestingTests.swift. The results are as following:

• With the simulator running iOS 14.4:

• With the simulator running iOS 13.7:

Can it be that I am missing some configuration in the project? I am asking because running the tests from the cloned repo seems to work just fine.

An other observation I made is that the offset is dependent on the simulated device. For the iPod touch (7th generation) simulator running iOS 14.4 the offset is smaller then for the above tested iPhone 11.

[lukeredpath]

I'm also seeing this issue although I'm seeing the same result in the 13.7 simulator, have you found a workaround? I suspect there's a bug in the safe area handling code or something has changed in recent Xcode versions.

[arkulpaKonstantin]

No sadly I have not found a workaround, beside using the 13.7 simulator for now.

[lukeredpath]

So it looks like the issue here is the ignoresSafeArea: property on UIHostingController. The built-in SwiftUI view snapshotting strategy wraps the SwiftUI view in a hosting controller but does not set this property to false. I have been able to get rid of this offset by explicitly wrapping my SwiftUI view in a hosting controller with ignoresSafeArea: set to true. Can you see if this works for you?

Edit: to make this easier I came up with a quick view modifier on View that I can chain on to my views in snapshot tests:

/// Wraps a component view in a `UIHostingController` at a fixed size with `ignoreSafeArea: true`
/// which gets rid of of the white space for the safe area that pushes the component view down when using the
/// standard `.image` strategy for snapshot testing.
///
/// By default this will give the component some padding to add some breathing space around the snapshot image,
/// this can be disabled by passing `padding: false`.
///
func snapshottableComponent(padding: Bool = true) -> UIHostingController<AnyView> {
    UIHostingController(
        rootView: AnyView(
            fixedSize().padding(padding ? 10 : 0)
        ),
        ignoreSafeArea: true
    )
}

If your component doesn't have an intrinsic content size you'll want to set the .frame() before attaching this modifier.

[arkulpaKonstantin]

Am I missing something or why do I not have the UIHostingController initializer with the ignoreSafeArea: property?

But it also works by adding the .ignoreSafeArea() view modifier. Thanks a lot.

[lukeredpath]

Ah, it looks like that's a custom extension we have within our project. I can't share the exact code but it seems to be based on this: https://gist.github.com/b8591340/97a8fb48822ac83e9e1cbbc746b258ef

If .ignoresSafeArea() works for you that's less hacky, it didn't work for me unfortunately.

[jjaychen1e]

You saved my day! When I wrap SwiftUI view inside UIHostingController and try to use sizeThatFits(:), it behaves weirdly. After disable the safe area inset, it works great! Btw, I want to ask that will these code cause rejection when publish to App Store?

[stephencelis]

Since this doesn't appear to be an issue with the library, I'm going to convert it to a discussion for now. If you believe this kind of thing can/should be addressed in the strategy, we'd be happy to discuss potential fixes there!