test(): add test template

fix(refresher): progressively reveal refresher
fix(refresher): do not move background el
2026-03-13 10:22:08 +08:00 · 2023-07-13 13:17:31 -04:00 · 2023-07-13 13:16:17 -04:00 · 2023-07-13 13:16:02 -04:00 · 2023-07-13 13:15:33 -04:00 · 2023-07-13 13:15:17 -04:00
4 changed files with 26 additions and 8 deletions
--- a/core/src/components/content/content.scss
+++ b/core/src/components/content/content.scss
@@ -49,8 +49,11 @@
  contain: size style;
 }

-:host(.ion-color) .inner-scroll {
+:host(.ion-color) #background-content {
  background: current-color(base);
+}
+
+:host(.ion-color) .inner-scroll {
  color: current-color(contrast);
 }

--- a/core/src/components/refresher/refresher.tsx
+++ b/core/src/components/refresher/refresher.tsx
@@ -756,10 +756,11 @@ export class Refresher implements ComponentInterface {
      if (this.scrollEl && this.backgroundContentEl) {
        const scrollStyle = this.scrollEl.style;
        const backgroundStyle = this.backgroundContentEl.style;
-        scrollStyle.transform = backgroundStyle.transform = y > 0 ? `translateY(${y}px) translateZ(0px)` : '';
-        scrollStyle.transitionDuration = backgroundStyle.transitionDuration = duration;
+        scrollStyle.transform = y > 0 ? `translateY(${y}px) translateZ(0px)` : '';
+        scrollStyle.transitionDuration = duration;
        scrollStyle.transitionDelay = backgroundStyle.transitionDelay = delay;
        scrollStyle.overflow = overflowVisible ? 'hidden' : '';
+        this.el.style.setProperty('clip-path', `polygon(0 0, 100% 0, 100% ${y}%, 0 ${y}%)`);
      }

      /**
--- a/core/src/components/refresher/test/basic/index.html
+++ b/core/src/components/refresher/test/basic/index.html
@@ -12,17 +12,31 @@
    <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-content {
+        --background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
+      }
+
+      ion-toolbar {
+        --background: transparent;
+        --color: white;
+      }
+
+      ion-list {
+        background: rgba(255, 255, 255, 0.8) !important;
+      }
+    </style>
  </head>

  <body>
    <ion-app>
-      <ion-header>
+      <ion-header class="ion-no-border">
        <ion-toolbar>
          <ion-title>Pull To Refresh</ion-title>
        </ion-toolbar>
      </ion-header>

-      <ion-content>
+      <ion-content fullscreen="true">
        <ion-refresher id="refresher" slot="fixed">
          <ion-refresher-content
            pulling-icon="arrow-down-outline"
@@ -33,7 +47,7 @@
          </ion-refresher-content>
        </ion-refresher>

-        <ion-list id="list"></ion-list>
+        <div id="list"></div>
      </ion-content>
    </ion-app>
    <ion-menu-controller></ion-menu-controller>
@@ -59,7 +73,7 @@
      function render() {
        let html = '';
        for (let item of items) {
-          html += `<ion-item button>${item}</ion-item>`;
+          html += `<ion-card><ion-card-content>${item}</ion-card-content></ion-card>`;
        }
        list.innerHTML = html;
      }
--- a/core/src/themes/ionic.globals.scss
+++ b/core/src/themes/ionic.globals.scss
@@ -50,7 +50,7 @@ $z-index-click-block:            99999;

 $z-index-fixed-content:          999;
 $z-index-scroll-content:         1;
-$z-index-refresher:              -1;
+$z-index-refresher:              0;

 $z-index-page-container:         0;
 $z-index-toolbar:                10;
Author	SHA1	Message	Date
Liam DeBeasi	4ce530a387	test(): add test template	2023-07-13 13:17:31 -04:00
Liam DeBeasi	7bf778449d	fix(refresher): progressively reveal refresher	2023-07-13 13:16:17 -04:00
Liam DeBeasi	61062c7e51	fix(refresher): do not move background el	2023-07-13 13:16:02 -04:00
Liam DeBeasi	973c22ed04	fix(refresher): display on top of content	2023-07-13 13:15:33 -04:00
Liam DeBeasi	67827fda96	fix(content): color is applied to background element	2023-07-13 13:15:17 -04:00