UI: Overlapping text while creating Rapid Test Profile

[Ein-Tim]

Avoid duplicates

• [X] Bug is not mentioned in the FAQ
• [X] Bug is specific for iOS only, for general issues / questions that apply to iOS and Android please raise them in the documentation repository
• [X] Bug is not already reported in another issue

Technical details

• Device name: iPhone 6s
• iOS version: iOS 14.5.1
• App version: 2.2.1

Describe the bug

While creating the rapid test profile it is possible that the headline "Rapid Test Profile" overlaps with the information text below.

Screenshot

Steps to reproduce the issue

1. Open the Corona-Warn-App
2. Click on "Next Steps" inside of the "Register your Test" box
3. Click on "Create Rapid Test Profile"
4. Directly click into the field "Street and House Number"
5. See the overlapping test

Expected behaviour

The headline should disappear (get to the top) as when you scroll further down.

---

Internal Tracking ID: EXPOSUREAPP-7295

[jucktnich]

Not reproducible on iPhone SE 1 iOS 14.5.1 CWA 2.2.1

[Ein-Tim]

@jucktnich Quite sure this is device specific. I assume that this affects all iPhones which have the screen size of the iPhone 6.

[jucktnich]

Ok Just wanted to be sure, it is not on small screen sizes.

[dsarkar]

Not reproducible on iPhone 6s iOS 14.4 CWA 2.2.1

[jucktnich]

On iPhone SE, the title is at the start in the header on iPhone 6 not, seems like this is the problem

[dsarkar]

font size?

[dsarkar]

@Ein-Tim @jucktnich ok, happens with medium font size only, and only tapping in "Strasse"? @Ein-Tim Correct?

[jucktnich]

Btw Still not reproducible on iPhone SE 1

[dsarkar]

Internal Tracking ID: EXPOSUREAPP-7295

[Ein-Tim]

@dsarkar

ok, happens with medium font size only, and only tapping in "Strasse"?

Yes, correct.

[dsarkar]

@Ein-Tim Thanks for confirming, that is also what I can reproduce. Internally reported that way. Enjoy weekend!

[ndegendogo]

I can reproduce this on the simulator on the current development branch (pre-release) as of today (06 Sept 2021, branch release/2.10.x, commit a43ff5a96f16ec695312ad050f8276bfc898874e) with the following sequence:

• precondition: no RAT profile available
• from Home tab, select test management
• scroll down and select 'create RAT profile'
• the form shows with normal title
• scroll down to reveal the large title
• select field "Strasse und Hausnummer"
• the keyboard appears and pushes the form up a bit so that the selected field is still visible
• but the large title remains and overlaps with the text.

cwa newest development / iOS 14.3 / iPhone SE

[ndegendogo]

I volunteer 😎

[Ein-Tim]

Thanks @ndegendogo! 🚀

[ndegendogo]

In the same scenario, but with a device with a higher screen (like iPhone 8), we see a similar, although weaker effect
(simulator / development branch as of today / iOS 14.3 / iPhone 8)

[ndegendogo]

And it does not occur on iPhone 6 / iOS 12.5.3. In that configuration the modal views are presented with full screen height, whereas the newer iOS versions have a slightly reduced screen height, which results in a slightly different layout.

[ndegendogo]

The layout constraints in the animation when the keyboard appears (a) look differently than in a scrolling-up animation (b). (a) the title remains in-place, and the form moves up towards the title, and even overlapping it. (b) the form moves up together with the title, they keep constant distance.

[ndegendogo]

Same layout issue occurs with iOS 13.7. Tested on simulator with iPhone SE.

[dsarkar]

@ndegendogo Is the root cause of this issue here related to another issue you fix with https://github.com/corona-warn-app/cwa-app-ios/pull/3511?

[ndegendogo]

@dsarkar no, this is different (and originally I had hoped the same...) 😅

Actually, I think I have understood roughly what is going on. I am not sure that I already understand the root cause; and I have not yet found a working solution.

So, maybe I share my insights so far.

In the scenario, the following happens:

• user taps a field of the form
• keyboard starts to appear
• this triggers the form to scroll up, so that the field-to-be-entered is on the visible part of the screen and above the keyboard.
• the scrolling is animated, and the animation is synchronized with the keyboard.

All this is nicely implemented here But now the form moves up so far that the navigation bar is supposed to shrink. Only the navigation bar is not aware of this, and stays large.

And now I am guessing wildly: 🙃

• maybe the navigation bar misses a trigger to re-layout itself? 🤷
• maybe the layout constraints are setup wrong? 🤷
• maybe the wrong property is animated? 🤷

[dsarkar]

@ndegendogo OK, thanks for the insight! I will forward this to the internal ticket for the developers.

[ndegendogo]

This happens also on devices with small screen like SE first generation. Click in the field for the surname. See screenshot.

iPhone SE first generation (simulator) / iOS 15.0 (simulator) / cwa latest on branch release/2.15.x as of Nov 04

[Ein-Tim]

This issue is still not fixed.

[dsarkar]

FYI PR: https://github.com/corona-warn-app/cwa-app-ios/pull/5014

[Ein-Tim]

I can confirm that this has been fixed with version 3.1, and I'm therefore closing this issue as completed.

[ndegendogo]

🎉