Ionic-framework: bug(refresher): white line underneath the navbar

[dylanvdmerwe]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
If you put an ion-refresher in your page, a white line appears underneath the navigation bar which is especially noticeable when the navbar and surrounding colors are dark. As soon as I remove the ion-refresher the white line goes away.

Expected behavior:
Adding an ion-refresher should not make such visible changes to the navbar.

Related code:

  <ion-refresher (ionRefresh)="refreshForms($event)">
    <ion-refresher-content pullingText="Pull to refresh forms" refreshingText="Loading forms..."></ion-refresher-content>
  </ion-refresher>

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.0
ios-sim version: 5.0.10
OS: macOS Sierra
Node Version: v6.9.5
Xcode version: Xcode 8.3 Build version 8E162

[jgw96]

Interesting issue, thanks for opening! We will take a look at this.

[brandyscarney]

A workaround is to add this to the variable.scss file:

$refresher-border-color: transparent;

I need to see if we can remove this border, I'm not sure why it's there. cc @manucorporat

[dylanvdmerwe]

Thanks @brandyscarney

Workaround seems to do the trick.

[manucorporat]

@brandyscarney no idea, maybe git blame?

[Manduro]

The border looks good when using a refresher on a list, like in the api demo. It would be weird without it. http://ionicframework.com/docs/api/components/refresher/Refresher/

It should only be visible when pulling though. A style exists for this already:

.has-refresher > .scroll-content {
  margin-top: -1px;
}

Problem is that this style is overridden by the margins that are dynamically added to .scroll-content to compensate for header and footer heights.

[Manduro]

Fix submitted! #12015

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.