Wrong top border on <ion-footer-bar> with retina devices

[ohh2ahh]

The top border of the footer gets rendered wrong on retina devices. As far as I know, you change the background-position to the top but you don't adjust the background-image: linear-gradient(...);. Because the transparent 1 px border is on top of the real border you get a "double border". I know, this is a very minor issue 😉

/* 1 px transparent border above real border */
background-image: linear-gradient(0deg, $bar-default-border, $bar-default-border 50%, transparent 50%);

/* Fix */
background-image: linear-gradient(180deg, $bar-default-border, $bar-default-border 50%, transparent 50%);

I tested it with v1.0.0-beta.8 on iOS.

[perrygovier]

Hey @ohh2ahh, could you put together an example in codepen or provide some screenshots?

[ohh2ahh]

Hi

Here is the CodePen (obviously, it works only on a retina device):
http://codepen.io/anon/pen/oaAdt

And here is a screenshot of the border, before and after the fix described above:

[perrygovier]

Great find @ohh2ahh! fixing now.

[ionitron-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.