Ionic-framework: bug: scrolling of ion-list glitchy when ion-segment is present

[kensodemann]

Bug Report

Ionic version:


[ ] 4.x
[x] 5.x

Current behavior:
On an iPad (and apparently only on an iPad as I have not replicated this on anything else), if you have an ion-segment with an ion-list on the page, the scrolling will not be smooth and will render blank lines as you scroll.

If you remove the ion-segment, then everything is fine, and the scrolling of the exact same list works great.

Expected behavior:
Scrolling would be smooth with or without the ion-segment

Steps to reproduce:

1. Clone this repo: https://github.com/lydemann/ionic-slow-list-demo
2. npm i
3. npm run build
4. npx cap sync
5. npx cap open ios

From Xcode run either on an iPad or on one of the iPad sims, and note the poor scrolling experience as seen in the video on the repo.

1. comment out the ion-segment here: https://github.com/lydemann/ionic-slow-list-demo/blob/master/src/app/home/home.page.html#L2-L6
2. npm run build
3. npx cap copy

build and run again from Xcode, but now note that the scrolling is smooth and everything renders properly throughout the scrolling.

In my testing, this works fine on iPhone devices. It is only iPad that seems to be involved.

Ionic info:

Ionic:

   Ionic CLI                     : 6.11.8 (/Users/kensodemann/.nvm/versions/node/v12.18.3/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.2
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.1
   @capacitor/core : 2.4.1

Utility:

   cordova-res                          : 0.15.1
   native-run (update available: 1.1.0) : 1.0.0

System:

   NodeJS : v12.18.3 (/Users/kensodemann/.nvm/versions/node/v12.18.3/bin/node)
   npm    : 6.14.8
   OS     : macOS Catalina

[liamdebeasi]

I can reproduce the issue. Still digging into the issue, but I am seeing ~30% higher CPU usage when ion-segment is on the page.

[liamdebeasi]

I can also reproduce this in Safari for iOS, so does not appear to be Capacitor related.

[liamdebeasi]

This is the culprit: https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/segment-button/segment-button.ios.scss#L41

This is causing every single element in the list to be composited, leading to hundreds of layers.

[liamdebeasi]

There is more in here that is causing this issue. This seems like a WebKit bug as the elements that are being composited really should not be composited.

[liamdebeasi]

Resolved via https://github.com/ionic-team/ionic-framework/pull/22110

[ionitron-bot[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.