fix(refresher): show when content is fullscreen (#29608)

Issue number: resolves #18714

---------

<!-- 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. -->

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?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- 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

<!--
  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. -->


[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

Author: thetaPC

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

core/src/components/refresher/test/fullscreen/index.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Refresher - Basic</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      ion-toolbar {
+        --opacity: 0.5;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Pull To Refresh</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content fullscreen>
+        <ion-refresher id="refresher" slot="fixed">
+          <ion-refresher-content
+            pulling-icon="arrow-down-outline"
+            pulling-text="Pull to refresh..."
+            refreshing-text="Refreshing..."
+            refreshing-spinner="circles"
+          >
+          </ion-refresher-content>
+        </ion-refresher>
+
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
+      </ion-content>
+    </ion-app>
+    <ion-menu-controller></ion-menu-controller>
+
+    <script>
+      const refresher = document.getElementById('refresher');
+
+      refresher.addEventListener('ionRefresh', () => {
+        setTimeout(() => {
+          refresher.complete();
+          // Custom event consumed by e2e tests
+          window.dispatchEvent(new CustomEvent('ionRefreshComplete'));
+        }, 500);
+      });
+    </script>
+  </body>
+</html>

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(
+        `
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Pull To Refresh</ion-title>
+            </ion-toolbar>
+          </ion-header>
+
+          <ion-content fullscreen>
+            <ion-refresher id="refresher" slot="fixed">
+              <ion-refresher-content
+                pulling-icon="arrow-down-outline"
+                pulling-text="Pull to refresh..."
+                refreshing-text="Refreshing..."
+                refreshing-spinner="circles"
+              >
+              </ion-refresher-content>
+            </ion-refresher>
+
+            <p>Pull this content down to trigger the refresh.</p>
+          </ion-content>
+
+          <script>
+            const refresher = document.getElementById('refresher');
+
+            refresher.addEventListener('ionRefresh', () => {
+              setTimeout(() => {
+                // Custom event consumed by e2e tests
+                window.dispatchEvent(new CustomEvent('ionRefreshComplete'));
+              }, 500);
+            });
+          </script>
+        `,
+        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'));
+      });
+    });
+  });
+});