0

I encountered the following problem when creating the icon:

https://jsfiddle.net/522r16jk/

It is displayed differently in different browsers. HTML

<span class="add-btn">+</span>
<span class="delete-btn">+</span>

SASS

  span{
    display: flex;
    width: 22px;
    height: 22px;
    border: 2px solid;
    font-size: 21px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    &.add-btn{
      color:$main-color;
      border-color: $main-color;
      margin-right: 10px;
      &:hover{
        color: $background-color;
        background-color: $main-color;
      }
    }
    &.delete-btn{
      color:#df4837;
      border-color: #df4837;
      transform: rotate(45deg);
      &:hover{
        color: $background-color;
        background-color: #df4837;
      }
    }
  }
Maxim Zagumennyy
  • 23
  • 7
  • 1
    welcome maxim! While you did not actually ask a question, you probably mean to ask why this happens, or how to stop this from happening? Your question will probably me better received if you actually ask your question. Even better if you add you attempts to fix it, and if you googled for differences between those browsers. Sadly, I don't know the answer, just trying to help you get one :) – Nanne Aug 13 '17 at 09:39
  • I think it's obvious that I want to fix this problem. – Maxim Zagumennyy Aug 13 '17 at 09:43
  • 1
    Maybe I wasn't completely clear enough, although at least I tried to be polite. Let me refrase it: I did not say you were not clear as I even commented that I understood the question. What I did say is that your question will probable be better received if you type it out. This is not me criticing you, this is me trying to help you get a better result here. If you don't want that (meta-)help, then fine. As your question does not actually have a question in it and shows no research effort, I suspect it won't do well. But maybe you will get an answer? Lets hope so. – Nanne Aug 13 '17 at 09:47
  • 1
    The code you provided doesn't render as the posted image does, and because of that it is very difficult to understand what you actually ask so I voted to close this as such. If you want this post to stay opened you have to make it much clearer, and with a _working_ code sample that actually reproduce the issue. – Asons Aug 13 '17 at 10:21
  • https://jsfiddle.net/522r16jk/ - i try to add this on jsfiddle – Maxim Zagumennyy Aug 13 '17 at 10:36
  • Looks the same to me in both FF and Chrome – Asons Aug 13 '17 at 10:42
  • 1
    @MaximZagumennyy While the fiddle does produce different results in different browsers, the differences are not the same as what your screenshots show. – Mr Lister Aug 13 '17 at 10:44
  • @LGSon On my machine at least, the rotated + in the second icon is not centered in the circle in Firefox. – Mr Lister Aug 13 '17 at 10:44
  • Centering font character with CSS will never be pixel prefect and render the exact same way in different browsers...and I personally can't see that either browser center it differently. Are we talking about 1px difference? – Asons Aug 13 '17 at 10:49
  • Chrome - http://prntscr.com/g7wbko FF - http://prntscr.com/g7wbq4 Each time it is displayed in different ways – Maxim Zagumennyy Aug 13 '17 at 11:37
  • @MrLister On mine too...1px off, and as the space and the "x"'s pixel size is uneven, it has to be. – Asons Aug 13 '17 at 13:16
  • @MaximZagumennyy For us to be able to help, you need to post a code that reproduce the behavior you describe, or else we won't be able to help. And as I commented before, you won't be able to do this pixel perfect using font characters. Use pseudo elements or an image for the cross and you can make it pixel perfect. – Asons Aug 13 '17 at 13:52
  • @LGSon I did not find a better solution than throw you a link to the whole page template - http://midliru.it-issolution.com/create_event.html The problem is seen specifically in the phone field. - http://prntscr.com/g7ypfi If you will be have any problem to find the phone field, you can add me to skype - dks19901 I do not want to use images because of the hover effect. – Maxim Zagumennyy Aug 13 '17 at 16:08
  • Are you talking about that the left circle with the plus sign is slightly to the left compared to the _phone_ icon above it? – Asons Aug 13 '17 at 17:19
  • @LGSon I say that in different browsers the plus and the cross look different. Why does this happen and how to fix it? – Maxim Zagumennyy Aug 13 '17 at 17:32
  • Simply put, there is no general fix as font metrics are dealt with slightly different based on which browser and OS it runs on. This post might clear things out: https://stackoverflow.com/questions/27631736/meaning-of-top-ascent-baseline-descent-bottom-and-leading-in-androids-font – Asons Aug 14 '17 at 07:10
  • @LGSon Solved the question thanks to svg – Maxim Zagumennyy Aug 14 '17 at 09:54

0 Answers0