ionic-team / ionic-team/ionic-framework

bug: webkit, style recalculations on hover with fixed slot

Đang mở
#24,386 9 bình luận 0 reaction 0 người được giao Xem trên GitHub
bug: external type: bug
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.