Corrupted layout in QR code creation screen on iPhone SE first generation

ndegendogo commented 3 years ago

Avoid duplicates

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

Technical details

Device name: iPhone SE (first generation) / tested on simulator
iOS version: iOS 15 / tested on simulator (Xcode 13.0)
App version: newest developer branch (release/2.14.x as of 03 Nov)

Describe the bug

The QR code creation form has a corrupted layout with overlapping text on iPhone SE first generation.

Steps to reproduce the issue

from 'Status' tab scroll to 'Planning an event' and press button 'Create QR code'
see screen 'My QR codes' and again press button 'Create QR code'
select a location type and get the QR code creation form
Note: on this screen size, only a single field is visible above the keyboard
(optional) fill the first field of the form
press 'Next' to get the next field of the form
the form scrolls up to reveal the next field. The location type overlays with the title. See screenshot.

Expected behaviour

No overlay of the two texts. Either the location type should push the title up into the navigation bar, or it should hide below the navigation bar (and at least be 'blurred' in that case).

Possible Fix

check the layout constraints, especially those for the safe area ...

Additional context

Simulator Screen Shot - iPhone SE (1st generation) - 2021-11-04 at 11 31 42

Internal Tracking ID: EXPOSUREAPP-10544 Internal Tracking ID: EXPOSUREAPP-10545

ndegendogo commented 3 years ago

@jucktnich IIRC you own such a device. Could you please test if this layout corruption is already present in the current released version, and on a true device? Thanks!

jucktnich commented 3 years ago

It's reproducible on a real world device

ndegendogo commented 3 years ago

@jucktnich oh - but thanks for the confirmation. Could you please add more details on your configuration? (iOS version and cwa version).

jucktnich commented 3 years ago

iOS 15.1 cwa 2.13.1 (0)

ndegendogo commented 3 years ago

Initial analysis:

the view controller is TraceLocationConfigurationViewController
the layout constraints for this view controller are specified in an interface builder file (TraceLocationConfigurationViewController.xib)

The following screenshot shows the view hierarchy

the two text fields (description and address) are laid out and grouped, within a stack view and a text field container view
this container view is laid out and grouped with a label (the location type), within another stack view ("top level stack view") and another view ("the top level content view")
and all this is embedded within a scroll view

ndegendogo commented 3 years ago

Initial analysis, continued. Now we look at the layout constraints.

the scroll view specifies the available full size - this is ok. Note: we have a translucent navigation bar, and the scroll view is supposed to slide under the bar.
the top-level content view specifies the full size of its superview (except its height may be smaller) ~this is not ok - with a translucent navigation bar the content view must take the safe area into account.~
the top-level stack view specifies insets of 16 resp. 10 - this again is ok.

Edit: the top-level content view has checked "Safe Area Relative Margins" - this sets insetsLayoutMarginsFromSafeArea=true, so it does account for the safe area.

Unfortunately, the top-level content view has no @IBOutlet definition, and so it cannot be referenced programmatically at the moment.

ndegendogo commented 3 years ago

The behaviour resembles very much what was observed in #2699.

The layout respects the safe area of the large title only as long as there is enough vertical space. As soon as vertical space becomes tight, it moves up, and overlaps with the large title. The upwards force seems too weak to push the title back into the navigation bar. Only when it starts to touch the bottom position of the "normal" navigation bar ( = with normal title size) - at this moment it succeeds to push the title up and into the bar.