Ionic-framework: bug: ion-content will-change: transform causing issues

[gabsgasps]

Bug Report

Ionic version:


[ ] 4.x
[x] 5.x

Current behavior:
In recent modification in content.scss, the property 'position: fixed' stopped working correctly.

And when I remove 'transform' it works correctly

but it can be overwritten by:

ion-content::part(scroll) {
     will-change: scroll-position;
}

Related code:
repository: https://github.com/gabsgasps/bug-positionfixed

Other information:
I would like help because I don't know why it happens, I managed to solve it by overwriting the css, but it doesn't make sense for a property to cause this.

Ionic info:

Ionic:

   Ionic CLI                     : 6.12.1
   Ionic Framework               : @ionic/angular 5.4.3
   @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.2
   @capacitor/core : 2.4.2

Utility:

   cordova-res : not installed
   native-run  : 0.3.0

System:

   NodeJS : v12.18.4
   npm    : 6.14.8
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue. This looks like a difference in how Chromium handles scrolling + compositing vs WebKit. I will make the fix in https://github.com/ionic-team/ionic-framework/commit/9f44966d8572a27d8296b38ae4f3e689c76c2e44 more specific so it only affects devices with WebKit.

[liamdebeasi]

Actually the Chromium behavior is correct according to the spec: https://bugs.chromium.org/p/chromium/issues/detail?id=413456

And WebKit has an open issue to fix the behavior in their engine: https://bugs.webkit.org/show_bug.cgi?id=167600

So will-change: transform is probably not a good solution here in general. I will remove that and find another solution for https://github.com/ionic-team/ionic-framework/pull/22180.

[liamdebeasi]

Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/[email protected]

[gabsgasps]

@liamdebeasi I tested and it's resolved

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/22489, and a fix will be available in an upcoming release of Ionic Framework.