Footer top border hidden

ionic-v1
1

Hello,

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 http://codepen.io/anon/pen/aOEyRp 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…

2

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;
  }
3

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).

5

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??
6

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)???