ionic-team / ionic-team/ionic-framework

bug: webkit, style recalculations on hover with fixed slot

Abierto
#24,386 9 comentarios 0 reacciones 0 asignados Ver en GitHub
bug: external type: bug
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.