Template 4 As Paywall Footer Has Incorrect Size While Loading, And Never Resizes Afterwards

[mergesort]

• [x] I have updated Purchases SDK to the latest version
• [x] I have read the Contribution Guidelines
• [x] I have searched the Community
• [x] I have read docs.revenuecat.com
• [x] I have searched for existing Github issues

Describe the bug When using template 4 and choosing to implement the paywall footer rather than a complete paywall, the paywall footer will load as a vertically stacked array of buttons during the loading state, then switches to a horizontally scrolling list of buttons. You can see in the video below how this manifests as an issue, I believe this causes the incorrect size to be allocated to the user's paywall screen. If you have content in the paywall body like this the headerView in the code below will be too high and unable to be reached by the user.

ScrollView(showsIndicators: false) {
    VStack(spacing: .regular) {
        self.paywallHeaderView
            .padding(.vertical, .regular)
            .padding(.top, .regular)
            .background(Color.green)

        self.featuresCardStack
            .padding(.top, .regular)
            .background(Color.yellow)
    }
    .background(Color.purple)
    .padding(.horizontal, .large)
}
.background(Color.orange)
.scrollBounceBehavior(.basedOnSize)
.paywallFooter(fonts: .rounded)

This is a recording of what users are experiencing, with background colors left in to emphasize the lack of resizing that occurs.

https://github.com/RevenueCat/purchases-ios/assets/716513/4e439c43-22af-4ec3-974b-7b5da1869573

1. Environment
   1. Platform: iOS
   2. SDK version: 4.41.2
   3. StoreKit version:
      • [x] StoreKit 1
      • [ ] StoreKit 2 (enabled with usesStoreKit2IfAvailable(true))
   4. OS version: iOS 17.4.1
   5. Xcode version: Xcode 15.3
   6. Device and/or simulator:
      • [x] Device
      • [x] Simulator
   7. Environment:
      • [x] Sandbox
      • [x] TestFight
      • [x] Production
   8. How widespread is the issue. Percentage of devices affected. 100%.
2. Debug logs that reproduce the issue. Complete logs with Purchases.logLevel = .verbose will help us debug this issue.

No logs needed, it's a visual issue.

3. Steps to reproduce, with a description of expected vs. actual behavior

4. Use the paywallFooter modifier to use RevenueCat's footer with your own content.

5. Bump up your accessibility size to take up more space, to the point where it would overflow the content when put into a ScrollView that contains a VStack.

6. Other information (e.g. stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, etc.) N/A

7. Additional context N/A

[RCGitBot]

👀 We've just linked this issue to our internal tracker and notified the team. Thank you for reporting, we're checking this out!

[Jethro87]

Hi @mergesort, thanks for filing this. Can you let us know when you're calling configure and how soon afterward you show the paywall? Also, after you've shown the paywall once, if you show it again, does the same issue occur?

[mergesort]

Hey @Jethro87, that's a great question. This is happening in the context of showing a paywall in my app's share extension, so configure and the paywall are being shown one after the other in succession.

To test if that was the issue I tried to add try? await Task.sleep(for: .seconds(5.0)) after the ViewModel which calls configure loads before showing the paywall, but I still see the same behavior manifesting.

Since this is a share extension that's wired up in a particular way it's a bit hard for me in the current context to make the paywall re-present, but I can give it a shot in a little bit if you think that may provide you some more valuable information.

[Jethro87]

@mergesort Thanks for the additional information - I appreciate you trying to debug this by delaying the paywall. Just to confirm, your accessibility settings are larger than default? How large have you bumped them up?

Also, are you showing a paywall in your app (not in the extension)? If so, does this also occur there with the same accessibility settings? Thanks.

[mergesort]

Hey @Jethro87, in my video I was trying to replicate the accessibility settings based on a user who reported this issue to me. They were running into this problem on an iPhone 14 Pro, with the accessibility settings of Extra Large one notch above the iOS default (Large), and I was able to replicate the problem with those settings.

When I run this in my app I don't have the same issue, the layout is fine. Though as I bump up the accessibility sizes you can see that a different set of issues emerges, as signified in the image below. (Still an iPhone 14 Pro, now set to Extra Extra Large.)

Thanks a lot!

[Jethro87]

Hey @mergesort! We aren't capping the text sizes due to accessiblity reasons, but we should definitely handle layouts differently at different accessibility modes (e.g., stacking layouts with overflowing text vs what you see in your screenshot). Our team is aware of this.

I have also escalated the share extension issue as our team wants to dig into this. I'm going to close this for now but will update when I have news for you. Please feel free to reopen it yourself anytime!

[github-actions[bot]]

This issue has been automatically locked due to no recent activity after it was closed. Please open a new issue for related reports.