diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx index 8f234f3eb8..25a121a3d0 100644 --- a/core/src/components/refresher/refresher.tsx +++ b/core/src/components/refresher/refresher.tsx @@ -48,6 +48,7 @@ export class Refresher implements ComponentInterface { private pointerDown = false; private needsCompletion = false; private didRefresh = false; + private contentFullscreen = false; private lastVelocityY = 0; private elementToTransform?: HTMLElement; private animations: Animation[] = []; @@ -476,6 +477,12 @@ export class Refresher implements ComponentInterface { * Query the background content element from the host ion-content element directly. */ this.backgroundContentEl = await contentEl.getBackgroundElement(); + /** + * Check if the content element is fullscreen to apply the correct styles + * when the refresher is refreshing. Otherwise, the refresher will be + * hidden because it is positioned behind the background content element. + */ + this.contentFullscreen = contentEl.fullscreen; if (await shouldUseNativeRefresher(this.el, getIonMode(this))) { this.setupNativeRefresher(contentEl); @@ -578,6 +585,15 @@ export class Refresher implements ComponentInterface { this.progress = 0; this.state = RefresherState.Inactive; this.memoizeOverflowStyle(); + + /** + * If the content is fullscreen, then we need to + * set the offset-top style on the background content + * element to ensure that the refresher is shown. + */ + if (this.contentFullscreen && this.backgroundContentEl) { + this.backgroundContentEl.style.setProperty('--offset-top', '0px'); + } } private onMove(detail: GestureDetail) { @@ -735,6 +751,18 @@ export class Refresher implements ComponentInterface { * user can scroll again. */ this.setCss(0, '0ms', false, '', true); + + /** + * Reset the offset-top style on the background content + * when the refresher is no longer refreshing and the + * content is fullscreen. + * + * This ensures that the behavior of background content + * does not change when refreshing is complete. + */ + if (this.contentFullscreen && this.backgroundContentEl) { + this.backgroundContentEl?.style.removeProperty('--offset-top'); + } }, 600); // reset the styles on the scroll element diff --git a/core/src/components/refresher/test/fullscreen/index.html b/core/src/components/refresher/test/fullscreen/index.html new file mode 100644 index 0000000000..be1b30f7b0 --- /dev/null +++ b/core/src/components/refresher/test/fullscreen/index.html @@ -0,0 +1,103 @@ + + + + + Refresher - Basic + + + + + + + + + + + + + + + Pull To Refresh + + + + + + + + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim + fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce + augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada + mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia + mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere + pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, + aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, + pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida + malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. + Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero + odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, + vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in + odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. + Etiam lobortis tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan + condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt + libero finibus at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse + enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin + justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur + libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, + vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam + neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + + + + + diff --git a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts new file mode 100644 index 0000000000..789f036a8c --- /dev/null +++ b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts @@ -0,0 +1,84 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +import { pullToRefresh } from '../test.utils'; + +/** + * This behavior does not vary across directions. + */ +configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => { + test.describe(title('refresher: fullscreen content'), () => { + test.beforeEach(async ({ page }) => { + /** + * Do not call `complete()` from `ion-refresher` in this test. + * This will allow the refresher to "pause" while refreshing. + * By pausing, the test can verify that the refresher is + * completely visible when the content is fullscreen. + */ + await page.setContent( + ` + + + Pull To Refresh + + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + + `, + config + ); + }); + + // Bug only occurs with the legacy refresher. + test.describe('legacy refresher', () => { + test('should display when content is fullscreen', async ({ page, browserName }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/18714', + }); + + const refresher = page.locator('ion-refresher'); + + await pullToRefresh(page); + + if (browserName === 'firefox') { + /** + * The drag is highlighting the text in Firefox for + * some reason. + * + * Clicking the mouse will remove the highlight and + * be more consistent with other browsers. This + * does not happen in Firefox, just when running + * in Playwright. + */ + await page.mouse.click(0, 0); + } + + await expect(refresher).toHaveScreenshot(screenshot('refresher-legacy-content-fullscreen')); + }); + }); + }); +}); diff --git a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6eff146a19 Binary files /dev/null and b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f98533116d Binary files /dev/null and b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Safari-linux.png b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ac4ba98e19 Binary files /dev/null and b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Chrome-linux.png b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..251cbbc71c Binary files /dev/null and b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Firefox-linux.png b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..0c8d2d9fb0 Binary files /dev/null and b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Safari-linux.png b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..45ce09639f Binary files /dev/null and b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Safari-linux.png differ