Footer top border hidden



when I use <ion-footer-bar> it doesn’t have top border. I found out it is caused by this code

/* border-width: 1px will actually create 2 device pixels on retina */
/* this nifty trick sets an actual 1px border on hi-res displays */
background-size: 0; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar {
border: none;

When I remove the border: none; using firebug, the top line is shown.
I’m trying to implement exactly this and can’t figure out why it doesn’t work for me. The only difference is that I’m using Sass.
I also found out that in the example above my textarea doesn’t get 2px top padding which it should since it is declared in the ionic’s scss :-/ These two issues might be connected.

If @mhartington could help, I would be really grateful…


What version of Ionic are you using? And are you testing it on a retina device? If yes, the border gets replaced by a background gradient to achieve a 1px wide border. What happens if you try this (not tested)?

.bar-footer {
  @media (min--moz-device-pixel-ratio: 1.5),
         (-webkit-min-device-pixel-ratio: 1.5),
         (min-device-pixel-ratio: 1.5),
         (min-resolution: 144dpi),
         (min-resolution: 1.5dppx) {
    background-image: linear-gradient(0deg, transparent, $bar-default-border 50%, $bar-default-border 50%);
    background-position: top;
    background-size: 100% 1px;
    background-repeat: no-repeat;


I’m on Ionic 1.0.0 and I’m testing in the browser - Chrome.

I tried it and it didn’t change anything… (it didn’t work first I needed to swap the .bar-footer section and the @media).


This is my summary:

  • the border was hidden because I told developer tools in Chrome to behave like an iPhone 5 which has pixel ratio > 1.5 thus the @media was applied
  • when I open the page using --lab the border is shown - it is always shown in the browser
  • when I open the app on my Galaxy S3 the border is not shown (ratio > 1.5) - why??


Do you guys see the border on Android phone with hi-res display? And why is it different for <ion-footer> (border hidden) and <div class="bar bar-footer"> (border not hidden)???