CSS glitch in Safari with Ionicons as background content and absolute positioning

Question

I created my first website using SASS (Compass) and I really like it, it's a very handy tool. I also added Font Awesome and used it quite frequently, because I want to optimize for Retina desiplays as well and therefore use less graphics.

The project I'm working on deals with feedback and discussions online, hence I want to place a '+' and '-' symbol as background inside the two bars: https://www.orat.io/stmt/42

This is the code for the '+' symbol:

.bar {
  height: 3em;
  background: lighten($pro-color, 20);
  position: relative;
  @extend %global-border-radius;
  margin-bottom: $margin / 2;
  &:before {
    position:absolute;
    top: -14px;
    right: 4px;
    font-size: 5em;
    color: #f8f8f8;
    content: "\f1c9";
    font-family: ionicons;
    }
  .inner {
    position: absolute;
    background: $pro-color;
    text-align: right;
    color: #fff;
    font: 300 2.25em $font-primary;
    padding: 0 10px;
    left: 0;
    top: 0;
    bottom: 0;
    min-width: 8%;
    @extend %global-border-radius;
  }
}

The problem is that in Safari (especially on iOS) the icons are strangely positioned. I tried to change various parameters but it didn't work. Everything is fine in Chrome, Firefox etc.

Any tips? Thanks guys

The problem is what, exactly ("it looks strange" is a poor description)? The way you have the question phrased, the problem is with Sass or FontAwesome. — cimmanon, Jan 19 '14 at 13:33
@cimmanon yes, you are right. But since I can't post any screenshots, it's hard to describe... — user1351482, Jan 19 '14 at 16:22
for those who don't know, 'content' attribute for any icon in inoicons font family could be found at http://ionicons.com/cheatsheet.html — Ali Ghanavatian, Nov 05 '14 at 19:09

score 1 · Answer 1 · answered Jan 19 '14 at 16:12

1

I check on Safari & Chrome on iOS , it looks like you just need to little bit fiddle around with the CSS, it could be a position issue. See the selector for ".bar" in your code and check the pseudo elements positioning.

you can try this for the "+" (same idea goes for "-");

&:before {
  position:absolute;
    top: 0;     // set positionings as zero
    right: 0;
    font-size: 5em;
    color: #f8f8f8;
    content: "\f1c9";
    font-family: ionicons;
    margin-top: -13px;    //fiddle around with the margins
    margin-right: 4px;
}

answered Jan 19 '14 at 16:12

arnold

468
9
21

thanks for your reply! I tried the code you posted and it showed the exact same result :/ But I figured out that if I use the "coordinates" _top: -17_ and _right: 5px_ it looks fine in **Safari** whereas _top: -13_ and _right: 4px_ show the same result in **Chrome** (both on Desktop) – user1351482 Jan 19 '14 at 18:40
can't help anyone? :( – user1351482 Jan 30 '14 at 13:43
try removing this properties "Position:absolute;top:0;right:0" values and now use the properties position:relative; float: right; margin-top: -10px; sometimes absolute position is tricky with browsers – arnold Jan 31 '14 at 05:32

score 1 · Accepted Answer · answered Feb 25 '14 at 08:59

1

Solved it! It was important to specifically set the line-height :)

answered Feb 25 '14 at 08:59

user1351482

379
3
16

CSS glitch in Safari with Ionicons as background content and absolute positioning

2 Answers2