From 5cdfac89f5389cb3009427183f7034ba05788bc2 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 12 Jun 2024 10:48:11 -0700 Subject: [PATCH] fix(refresher): show when content is fullscreen (#29608) Issue number: resolves #18714 --------- ## What is the current behavior? When the `ion-content` has the fullscreen attribute, the `ion-refresher` will be hidden while refreshing. This can be seen by dragging far enough to trigger it to snap back and refresh. The refresher ends up being hidden behind the background content element. https://github.com/ionic-team/ionic-framework/assets/13530427/27b5393b-dd31-44a5-b872-97709e3a0980 ## What is the new behavior? - Set the `--offset-top` to `0px` for the background content element. This reflects the same behavior of when the content is not fullscreen. By setting this to `0px`, the refresher is visible while refreshing. - Added a private prop within refresher to keep track of whether `ion-content` is `fullscreen` or not. - Added test. Originally, I was going to update the `pullMin` and `pullMax` as agreed on from the investigation ticket. However, it ended up adding too much space between the refresher and the content. This is the reason why I decided to modify the background background instead. Otherwise, it wouldn't mimic the behavior when content doesn't have the `fullscreen` attribute. Example of what the spacing looked like: https://github.com/ionic-team/ionic-framework/assets/13530427/389cea62-48c1-4464-be47-44bc3b6c0315 ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information [Preview](https://ionic-framework-git-rou-4950-ionic1.vercel.app/src/components/refresher/test/fullscreen) How to test: 1. Navigate to the preview page 2. Use the browser's simulator to chose an iOS device (might need to refresh the page) 3. Drag the screen down 4. Verify that the refreshing text is shown 5. Use the browser's simulator to chose an Android device (might need to refresh the page) 6. Drag the screen down 7. Verify that the refreshing text is shown --- core/src/components/refresher/refresher.tsx | 28 +++++ .../refresher/test/fullscreen/index.html | 103 ++++++++++++++++++ .../test/fullscreen/refresher.e2e.ts | 84 ++++++++++++++ ...fullscreen-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 2138 bytes ...ullscreen-ios-ltr-Mobile-Firefox-linux.png | Bin 0 -> 2816 bytes ...fullscreen-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 2388 bytes ...-fullscreen-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 2320 bytes ...fullscreen-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 3006 bytes ...-fullscreen-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 2304 bytes 9 files changed, 215 insertions(+) create mode 100644 core/src/components/refresher/test/fullscreen/index.html create mode 100644 core/src/components/refresher/test/fullscreen/refresher.e2e.ts create mode 100644 core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Safari-linux.png create mode 100644 core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Safari-linux.png 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 0000000000000000000000000000000000000000..6eff146a1934542724fc19e9e63da65b5ffa4a85 GIT binary patch literal 2138 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 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..251cbbc71c439e5e500a3ecc43d7e2a695ca23bd GIT binary patch literal 2320 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 F{tN4CVov}7 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..0c8d2d9fb074c26628de69536788f121c5f86f05 GIT binary patch literal 3006 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 literal 0 HcmV?d00001