[BUG] Navigation to a Kirby page not filling out height of the viewport makes the screen flicker on iPhone

[ThomasGuldborg]

Describe the bug The bug occurs when navigating from one Kirby page to another Kirby page which is too low. That is has not enough content to fill out the height of the viewport.

To Reproduce Steps to reproduce the behavior:

Use this template:

<kirby-page>
  <kirby-page-content>
    <button routerLink="navigate">Click here to navigate to another Kirby page</button>
  </kirby-page-content>
</kirby-page>

Open on iPhone Go to the specific page and hit the button Swipe right to get back and then the screen flickers or loades slow depending on the iPhone model

Bugfix proposal The bugfix includes a minimum height styling in the css file for an empty div, such as: overview.component.html:

<kirby-page>
  <kirby-page-content>
  <div class="minimum-height">
    <button routerLink="navigate">Click here to navigate to another Kirby page</button>
  </div>
  </kirby-page-content>
</kirby-page>

overview.component.scss:

.minimum-height {
  min-height: calc(100vh - 200px); // Subtracting 200 as offset for content which is always there
}

Kirby version

• 1.4.44

Expected behavior No flickering or slow loading page when navigating to it

Screenshots

Please complete the following information:

• OS: Only on iPhone

[alxzak]

This issue will be closed due to backlog prioritization and pruning. https://github.com/kirbydesign/designsystem/discussions/1704#discussion-3522993

[RasmusKjeldgaard]

This is impeeded until we have a way to test and debug on an iPhone. Probably should just create the simplest possible repro in DRB, and deploy for iOS.

[mictro]

New info received from reporter on how to reproduce with current Kirby version: $ Install XCode $ git clone git@github.com:Bankdata/relationsbank.git $ cd relationsbank $ git checkout flickering-screen-on-ios-issue $ npm run ios:sydbank:mock $ In the app simulator choose 'Bolig' from the main-menu $ Press the 'Click here to navigate to....' button $ Swipe back to the previous page and verify the problem stated above.

[mictro]

Tried to reproduce the blinking or jaggy behaviour during swipe on iPhone 11 through 13 using the provided example app. Also created several simple standalone examples based on a kirby-page not filling the whole viewport. Unfortunately none of these examples did reproduce the problem.

[alxzak]

This is unfortunately still an issue, please talk to Nikolaj Skousen about it.

[RasmusKjeldgaard]

This seems to be reproducible in the flows app. The steps are:

1. checkout this repo and install
2. run npm run start:flows:ios
3. deploy to a real ios device (my device is running iOS 16.4.1 as of writing)
4. Choose the 'Navigate to list item detail' flow
5. Click on 'Account' in the tab bar
6. Choose an account and bezel swipe back to the previous Account page
7. See that it flickers when the page has fully transitioned

This is in contrast to other pages (e.g. Account 1 --> click on transaction item in list --> bezel swipe back) where it transitions nicely.