Search code examples
iosangularjsionic-frameworkionic-view

<ion-footer-bar> displays in iOS Ionic View with thin grey line

<ion-footer-bar class="pizza-footer">
    <img ng-src="img/pizza_bottom.png" />
</ion-footer-bar>

In my stylesheet, I have these styles applied to both the footer bar and the image.

ion-footer-bar {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-color:transparent !important;
}

Despite this attempt, there is still a thin grey line above the footer bar that I cannot remove. Is there a CSS property I should consider?

NOTE: This grey line only appears when I compile and view the app in Ionic View. Chrome and Safari do not show this grey line.

Solution

  • Try this:

    <ion-footer-bar class="pizza-footer no-line">
    <img ng-src="img/pizza_bottom.png" />
</ion-footer-bar>

.no-line{
  background-color:transparent !important;
  background-image: none !important;
  border:0px !important;
}