bug: webkit, style recalculations on hover with fixed slot

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

Start with core/src/components/content/content.scss, especially the referenced lines 107 and 168-169, then reproduce the issue in Safari using the linked StackBlitz example and Timeline tools. Compare style recalculation and painting with the ion-content shadow-DOM style tag present and removed; done means identifying a confirmed cause and reducing the reported pointer-related performance cost.

由索引模型根据 Issue 内容生成。