javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf(sheet): fixing performance regression on modal sheets when expandToScroll is false (#30267)

Browse Source 
Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying. -->
Currently, when a sheet is moved while `expandToScroll` is disabled, the
DOM is queried excessively causing performance degradation.


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

We now cache the targeted element in `onStart` and refer to it in
`onMove` and `onEnd`, preventing over-querying the DOM

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
This regression was introduced in #30257 and quickly highlighted by a
member of the community
This commit is contained in:
Shane
2025-03-19 11:55:46 -07:00
committed by GitHub
parent 2018a045ab
commit c4b9212640
1 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
core/src/components/modal/gestures/sheet.ts
View File

@ -1,6 +1,6 @@
import { isIonContent, findClosestIonContent } from '@utils/content';
import { findClosestIonContent, isIonContent } from '@utils/content';
import { createGesture } from '@utils/gesture';
import { clamp, raf, getElementRoot } from '@utils/helpers';
import { clamp, getElementRoot, raf } from '@utils/helpers';
import { FOCUS_TRAP_DISABLE_CLASS } from '@utils/overlays';
import type { Animation } from '../../../interface';
@ -83,6 +83,7 @@ export const createSheetGesture = (
let currentBreakpoint = initialBreakpoint;
let offset = 0;
let canDismissBlocksGesture = false;
let cachedScrollEl: HTMLElement | null = null;
const canDismissMaxStep = 0.95;
const maxBreakpoint = breakpoints[breakpoints.length - 1];
const minBreakpoint = breakpoints[0];
@ -233,6 +234,17 @@ export const createSheetGesture = (
*/
canDismissBlocksGesture = baseEl.canDismiss !== undefined && baseEl.canDismiss !== true && minBreakpoint === 0;
/**
* Cache the scroll element reference when the gesture starts,
* this allows us to avoid querying the DOM for the target in onMove,
* which would impact performance significantly.
*/
if (!expandToScroll) {
const targetEl = findClosestIonContent(detail.event.target! as HTMLElement);
cachedScrollEl =
targetEl && isIonContent(targetEl) ? getElementRoot(targetEl).querySelector('.inner-scroll') : targetEl;
}
/**
* If expandToScroll is disabled, we need to swap
* the footer visibility to the original, so if the modal
@ -267,13 +279,8 @@ export const createSheetGesture = (
* If `expandToScroll` is disabled, and an upwards swipe gesture is done within
* the scrollable content, we should not allow the swipe gesture to continue.
*/
if (!expandToScroll && detail.deltaY <= 0) {
const contentEl = findClosestIonContent(detail.event.target! as HTMLElement);
const scrollEl =
contentEl && isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
if (scrollEl) {
return;
}
if (!expandToScroll && detail.deltaY <= 0 && cachedScrollEl) {
return;
}
/**
@ -334,12 +341,8 @@ export const createSheetGesture = (
* function to be called if the user is trying to swipe content upwards and the content
* is not scrolled to the top.
*/
if (!expandToScroll && detail.deltaY <= 0 && findClosestIonContent(detail.event.target! as HTMLElement)) {
const contentEl = findClosestIonContent(detail.event.target! as HTMLElement)!;
const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
if (scrollEl!.scrollTop > 0) {
return;
}
if (!expandToScroll && detail.deltaY <= 0 && cachedScrollEl && cachedScrollEl.scrollTop > 0) {
return;
}
/**