fix(refresher): border should only show when pulled (#12015)

fixes #10994

src/components/content/content.ts

@@ -167,7 +167,8 @@ export class EventEmitterProxy<T> extends EventEmitter<T> {
     '</div>' +
     '<ng-content select="ion-refresher"></ng-content>',
   host: {
-    '[class.statusbar-padding]': 'statusbarPadding'
+    '[class.statusbar-padding]': 'statusbarPadding',
+    '[class.has-refresher]': '_hasRefresher'
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
@@ -212,6 +213,8 @@ export class Content extends Ion implements OnDestroy, AfterViewInit, IContent {
   /** @internal */
   _fullscreen: boolean;
   /** @internal */
+  _hasRefresher: boolean = false;
+  /** @internal */
   _footerEle: HTMLElement;
   /** @internal */
   _dirty: boolean;
@@ -782,6 +785,11 @@ export class Content extends Ion implements OnDestroy, AfterViewInit, IContent {
       this._cBottom += this._tabbarHeight;
     }
 
+    // Refresher uses a border which should be hidden unless pulled
+    if (this._hasRefresher) {
+      this._cTop -= 1;
+    }
+
     // Fixed content shouldn't include content padding
     this._fTop = this._cTop;
     this._fBottom = this._cBottom;

src/components/refresher/refresher.ts

@@ -202,7 +202,7 @@ export class Refresher {
 
   constructor(private _plt: Platform, @Host() private _content: Content, private _zone: NgZone, gestureCtrl: GestureController) {
     this._events = new UIEventManager(_plt);
-    _content.setElementClass('has-refresher', true);
+    _content._hasRefresher = true;
     this._gesture = gestureCtrl.createGesture({
       name: GESTURE_REFRESHER,
       priority: GESTURE_PRIORITY_REFRESHER

src/components/refresher/test/refresher.spec.ts

@@ -224,6 +224,9 @@ describe('Refresher', () => {
 
   });
 
+  it('should set hasRefresher on content', () => {
+    expect(content._hasRefresher).toBeTruthy();
+  });
 
   let contentElementRef: any;
   let refresher: Refresher;