bug: The screen becomes empty when scrolling too fast

[jsgoupil]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Scrolling anything in ionic will start displaying behavior that the screen starts to remove elements.
We literally tried everything by removing all the functionality of our app (menus, etc.) and we are unable to make this app stable. We wonder if there would be a way to turn off this thing where ionic is trying to remove objects from the screen since our app does not display infinite amounts of elements.

Our app plans to work only in PWA mode, we do not compile for iOS.
This reproduces all the time on Safari, Chrome, Safari Installed. Currently I have an iPad Air 2, 15.6.
But I get these bug reports on ionic 6 constantly, and now that we tried to update to ionic 7 it happens even more.

20240202_111820.mp4

Expected Behavior

Scrolling without elements disappearing.

Steps to Reproduce

Visit: https://mobile-pre-prod.3cconnect.com/
Login: contact+tech1@jsgoupil.com
Password: password1

Click on the first "Continue" element on the screen then try to scroll.

Code Reproduction URL

No response

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

       Require stack:
       - C:\Users\jsgou\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\jsgou\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\jsgou\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\jsgou\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'

       Require stack:
       - C:\Users\jsgou\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\jsgou\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\jsgou\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\jsgou\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

   Ionic CLI       : 7.2.0 (C:\Users\jsgou\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/react 7.7.0

Capacitor:

   Capacitor CLI      : 5.6.0
   @capacitor/android : not installed
   @capacitor/core    : 5.6.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.1

System:

   NodeJS : v18.14.0 (C:\Program Files\nodejs\node.exe)
   npm    : 8.5.5
   OS     : Windows 10

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[liamdebeasi]

Does this issue happen on newer versions of iOS or other devices? WebKit handles the rendering of the web content, not Ionic. Given the age of the device and the operating system, it's likely that this is related to device performance.

[jsgoupil]

Yes, this started to manifest with the latest update of iOS. Definitely happening a lot of v17, but my iPad can also do it with the latest 15.6

[liamdebeasi]

Can you provide a minimal reproduction of the issue that we can run on our test devices?

[jsgoupil]

I will do my best today. yes.

[jsgoupil]

I have reduced the code to a very minimal for you to repro, but the code is kind of private. Even though it's quite barebone now.
I have given you access to have a look. If you really need this to be public, I can consider opening it up.
https://github.com/3cconnect/3c-copy

npm install
yarn build
yarn serve

Then visit
http://localhost:3501/appointments/3/info

I can repro on iPad. Safari installed or not installed, and Chrome as well.

Simply scroll fast (flick) to the bottom of the page then everything disappears.

Let me know if you need anything else.

[jsgoupil]

I confirm with Chrome that I can't repro this issue on ionic 6. However, with ionic 7, I can repro this easily with Chrome.
iPad Air 2, 15.6

[jsgoupil]

We tried to remove all IonContent and the app started to behave better. But obviously broke our UI.

20240205_105106.mp4

[averyjohnston]

Could you provide a more minimal repo that avoids using private code, then share it publicly? The best way would be to start with a blank Ionic app (see the contributing guide for more info) and add to it until the issue reproduces. The current repro has a lot of extra functionality that makes it difficult to isolate the issue, and it would be ideal if the app could be shared publicly so the rest of the team can take a look.

[jsgoupil]

We figured out the culprit. A font-face that was from Google long time ago was causing problem.
The unicode-range was not working properly.
By removing this code, it started to work:

// SourceSansPro - latin-ext
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/SourceSansPro-Regular-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

// Poppins - latin-ext
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Poppins-Regular-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

Since we figured out the issue, I will let you decide if you want to investigate further or close this bug. Thanks.

[averyjohnston]

Glad you were able to figure it out! Since it doesn't sound like this is a bug in Ionic, I'll go ahead and close it, but let us know if the problem pops up again in Ionic Framework code.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.