Strange userAgent issue causing element displaced

Question

This must be a very simple HTML/CSS cross-browser issue but I just can't figure out why.

A live fiddle page is easier for me to explain the situation: https://jsfiddle.net/9gyp18f4/1, I will also put the codes here below. So the problem is, when you open this fiddle with Safari, the second button is displaced as shown below.

I have only a Macbook Air with small screen, after fighting with this issue, my brain and my eye both are failing me.

Summary: If anyone is wondering what the codes are doing in this fiddle: this is a customized Addthis's "inline tool", their wechat button doesn't work well so I replace it with my own by adding a class to it. And I use requestAnimationFrame to make sure the class is added after the button's HTML is actually loaded, because it is loaded by Addthis's code.

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5eaa206a3b043d9d"></script>

And the HTML is simply

<div class="addthis_inline_share_toolbox"></div>

before Addthis's JS code put actual buttons into it. The actual HTML of the buttons is kind of bloated and I put the Facebook's here

<a role="button" tabindex="0" class="at-icon-wrapper at-share-btn at-svc-facebook" style="background-color: rgb(59, 89, 152); border-radius: 4px;"><span class="at4-visually-hidden">Share to Facebook</span><span class="at-icon-wrapper"
    style="line-height: 32px; height: 32px; width: 32px;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1" role="img" aria-labelledby="at-svg-facebook-4"
      style="fill: rgb(255, 255, 255); width: 32px; height: 32px;" class="at-icon at-icon-facebook">
      <title id="at-svg-facebook-4">Facebook</title>
      <g>
        <path d="M22 5.16c-.406-.054-1.806-.16-3.43-.16-3.4 0-5.733 1.825-5.733 5.17v2.882H9v3.913h3.837V27h4.604V16.965h3.823l.587-3.913h-4.41v-2.5c0-1.123.347-1.903 2.198-1.903H22V5.16z" fill-rule="evenodd"></path>
      </g>
    </svg></span></a>

To make wechat button works as I desire, I have to remove the wechat button's at-share-btn class because otherwise clicking this button will trigger Addthis's event instead of mine. This causes the button's styling to be a little different from others, so I put some CSS to align its styling with other buttons.

.wechatNativeShare{
  background:green;
  display:inline-block
}

#atstbx .wechatNativeShare{
  margin:0 2px 5px;padding:5px
}

However, after doing these customizations, the button won't behave on Safari. I believe the issue has little to do with my customizations except for replacing its original Class(at-share-btn) with mine(.wechatNativeShare). What might cause the issue?

Answer 1

You can easily use vertical-align: top;! This should work for every browser.

The snippet is only showing some errors so here's the code:

HTML:

<div class="addthis_inline_share_toolbox"></div>

CSS:

.wechatNativeShare{
  background:green;
  display:inline-block;
  vertical-align: top; /* This is what i added */
}

#atstbx .wechatNativeShare{
  margin:0 2px 5px;padding:5px
}

JavaScript:

function addWechatNativeShare(){

  let $ = jQuery;
    
  if ($('#atstbx .at-svc-wechat').length === 0) {
    console.log($('#atstbx .at-svc-wechat').length);
    requestAnimationFrame(addWechatNativeShare);
  }
  $('#atstbx .at-svc-wechat').removeClass('at-share-btn').addClass('wechatNativeShare');
}

requestAnimationFrame(addWechatNativeShare);