CSS text alignment issue over Safari

Question

The text is properly aligned in Chrome but as it goes in Safari the text messes up its position and touches the top of the container (text container)

Chrome: Chrome view

Safari: Safari view

As you can see in Safari, the text container (span) has its proper size but the text inside is touching the roof. I've tried things to solve this by messing the height, line height, position, etc but still no luck.

The current approach used in the image is I've made the span position absolute and align it in the center and it (span) is in the center but the text is not being aligned vertically. (Also tried the vertical-align property but no luck)

Are there any fix/workarounds for this?

Tech Stack: Gatsby with Tailwind + Modular sass

.linkButton {
  padding-right: 30px;
  padding-left: 8px;
  position: relative;
  background-color: rgb(85, 85, 85);
  transition: 0.25s all ease-in-out;
  display: flex;
  line-height: 36px;
  width: 180px;
  min-height: 35px;

  .text {
    transition: 0.25s all ease-in-out;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  &::after {
    content: "";
    background-color: #fff;
    height: 12px;
    width: 9px;
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transition: 0.25s all ease-in-out;
    z-index: 10;
  }

  &::before {
    height: 100%;
    width: 100%;
    content: "";
    position: absolute;
    background-image: linear-gradient(to right, #4100a3 0%, #0d52ff 100%);
    top: 0px;
    left: 0px;
    z-index: 5;
    opacity: 0;
    transition: 0.25s all ease-in-out;
  }

  &:hover {
    width: 185px;
    cursor: pointer;
    .text {
      transform: translate(4%, -50%);
      -webkit-transform: translate(4%, -50%);
    }

    &::after {
      transform: scale(1.25) translateY(-40%);
    }
    &::before {
      opacity: 1;
    }
  }
}

<a href="/features">
  <div class="index-module--linkButton--3DaPN mt-3 md:mt-12 mx-auto md:mx-0 flex items-center justify-center text-white">
    <span class="index-module--text--QcmPb z-10">View all Features</span>
  </div>
</a>

Answer 1

Solved! The issue was with font rendering as it differs between browsers, not some line-height issue...

This resolved my issue: Font Rendering / Line-Height Issue on Mac/PC (outside of element)