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/angular@5.5.0-dev.202011121513.0956f8b

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

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