ionic-team / ionic-team/ionic-framework
bug: webkit, style recalculations on hover with fixed slot
- 主要言語
- 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 はまだ評価されていません。