bug: The screen becomes empty when scrolling too fast

[jsgoupil]

bug: The screen becomes empty when scrolling too fast

[jsgoupil]

I will do my best today. yes.

[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 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

[amandaejohnston]

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.

[amandaejohnston]

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.