ionic-team / ionic-team/ionic-framework

bug: webkit, style recalculations on hover with fixed slot

Aperta
#24,386 9 commenti 0 reazioni 0 assegnatari Vedi su GitHub
bug: external type: bug
Lingua principale
TypeScript
Stelle
52.7k
Fork
13.3k
Merge medio
1g 15h
PR unite (30g)
51

Descrizione

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

- [ ] v4.x
- [X] v5.x
- [X] v6.x

### Current Behavior

This issue attempts to address performance issues with `ion-content`, a continuation of #24359.

There are some performance issues with `ion-content` as more child DOM nodes are added. Any interaction with the pointer causes `Styles Invalidated` and `Styles Recalculated` events to occur that are very slow. I'm not sure if this is an issue with:
* How webkit optimizes shadow DOM styling
* If `will-change: scroll-position` is not performing well here.
https://github.com/ionic-team/ionic-framework/blob/03dd3729332da31c1541e5f62084d12a852231f6/core/src/components/content/content.scss#L107
* If webkit is recomputing math like in situations like these:
https://github.com/ionic-team/ionic-framework/blob/03dd3729332da31c1541e5f62084d12a852231f6/core/src/components/content/content.scss#L168-L169

### Expected Behavior

The styles required for `ion-content` should not introduce performance issues as the number of DOM nodes increases within the component's slot.

### Steps to Reproduce

In Safari, using developer tools you should be able to use the "Timeline" to inspect the CPU usage of this page after it has loaded:

https://angular-ivy-7he8g8.stackblitz.io

By just moving my mouse and clicking around CPU is maxed out. All related to styles and painting on the main thread.

https://user-images.githubusercontent.com/1731025/145899511-181cb2b4-89bd-45da-aaca-19e98bd2e9d5.mov

Now if I delete the `` tag within the `<ion-content>` shadow DOM, the overall CPU usage is much less.

https://user-images.githubusercontent.com/1731025/145899583-013d680a-0ae5-48db-84aa-84081b103b8c.mov

### Code Reproduction URL

https://stackblitz.com/edit/angular-ivy-7he8g8

### Ionic Info

latest

### Additional Information

_No response_

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.