ionic-team / ionic-team/ionic-framework

bug: webkit, style recalculations on hover with fixed slot

オープン
#24,386 コメント 9 件 リアクション 0 件 担当者 0 名 GitHub で見る
bug: external type: bug
主要言語
TypeScript
スター
52.7k
フォーク
13.3k
平均マージ
1日 15時間
マージ済み PR(30日)
51

説明

### 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_

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。