fix(refresher): show when content is fullscreen

[thetaPC]

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.

Screen.Recording.2024-06-10.at.1.36.24.PM.mov

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:

Screen.Recording.2024-06-10.at.1.36.55.PM.mov

Does this introduce a breaking change?

• Yes
• No

Other information

Preview

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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 11, 2024 6:50pm

[brandyscarney]

This is an excellent, clean solution. I tested both the native and legacy refreshers in ios and md on Chrome, Firefox, Safari, and on a physical iPhone. Everything is working great after this fix. Great work! 👍