Safari handles positioned elements differently

The problem is that (in mobile view) chrome renders every thing correctly and as expected, but things go sideways with safari.. down below screenshots taken from both regarding some pages that encountered the issue.

• chrome screen:
  

• Safari screen:
  

As you can see the backgound: radial-gradient() is shifted to the rght a little bit which causes misalignment with indicator(black background and 50% radius) in Safari browser.
Here is the markup:

    <nav class="nav">  
        <ul class="menu-nav">  
            <a class="sc-nav-indicator"></a>    
            <li  class="menu-nav__item active sc-current" >
                <a href="#home"  class="menu-nav__link ">
                    <i data-id="home" class="fas fa-home"></i>
                </a>
            </li>
            <li  class="menu-nav__item" >
                <a href="#about" data-id="about" class="menu-nav__link">
                    <i data-id="about" class="fas fa-user-tie"></i> 
                </a>
            </li>
            <li  class="menu-nav__item" >
                <a href="#projects"  class="menu-nav__link">
                    <i data-id="projects" class="fas fa-tasks"></i>
                </a>
            </li>
            <li  class="menu-nav__item" >
                <a href="#contact"  class="menu-nav__link">
                    <i data-id="contact" class="fas fa-link"></i>
                </a>
            </li>
        </ul><!-- .menu-nav -->
    </nav>`  

The stylesheet:

/* THE NAVIGATION MENU
-----------------------------------------*/
.nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: radial-gradient(
    circle at 13.5% 0,
    transparent 36px,
    #d3a500 37px
  );
  transition: cubic-bezier(0.57, 0.23, 0.08, 0.96) 0.45s;

  .menu-nav {
    display: flex;
    inline-size: 80%;
    height: 50px;
    margin: auto;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    list-style-type: none;
    filter: drop-shadow(0px -1px 6px rgba(0, 0, 0, 0.08))
      drop-shadow(0px -2px 12px rgba(0, 0, 0, 0.12));

    &__item {
      @include transition-ease;
      &.active.sc-current > a {
        color: $light-color;
      }
    }

    &__link {
      color: $primary-color;
      span {
        display: none;
      }
      i {
        display: inherit;
        &:active {
          transform: rotate(-420deg);
          @include transition-ease;
        }
      }
    }
  }

  .sc-nav-indicator {
    position: absolute;
    width: 56px;
    height: 56px;
    bottom: 1.4rem;
    left: 0;
    background-color: darken($primary-color, 100%);
    box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.08),
      0px 3px 6px rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    transition: cubic-bezier(0.45, 0.73, 0, 0.59) 0.3s;
  }
  .sc-current {
    position: relative;
    z-index: 3;
    transform: translate3d(0px, -22px, 0px);
  }
}

The javascript block of code to handle the position of the indicator and radial-gradient:

const nav = document.querySelector(".nav");
const menuItems = document.querySelectorAll(".menu-nav__item");
const menuIndecator = document.querySelector(".sc-nav-indicator");
const currItem = document.querySelector(".sc-current");
const links = document.querySelectorAll("li .menu-nav__link");
const px = 14.5;

indicatorPosition = currItem.offsetLeft;
menuIndecator.style.left = indicatorPosition - px + "px";
nav.style.backgroundPosition = indicatorPosition + "px";


links.forEach((link) => {
  link.addEventListener("click", sectionToggle);
});

function sectionToggle(event) {
  
// some block of code not related to the issue, and then call the method

  offsetX(event.currentTarget);
}

function offsetX(elem) {
  menuItems.forEach((item) => item.classList.remove( "sc-current", "active"));  

  // Some block of code irrelevant to the issue, and then call the methods.

    posIndicatorNavBg(elem.parentElement);
    elem.parentElement.classList.add("sc-current", "active");
  }
}

function posIndicatorNavBg(element) {
  console.log("element:", element);
  indicatorPosition = element.offsetLeft;
  console.log("offsetleft:", indicatorPosition);
  menuIndecator.style.left = indicatorPosition - px + "px";
  nav.style.backgroundPosition = indicatorPosition + "px";
}

Live demo of the project.

NB:

• The whole project was built with html5, pure css3 (preprocessed by sass), vanilla javascript for learning front-end technologies purposes.
• vendor prefixes are added by the live sass compiler extension of vscode.

PS:
How to test your site with safari if you’re running on ubuntu 20.04? I tried wine but it gives way old version of safari (version 5) and it didn’t come in handy !!

Answer

Make sure if different browsers support different things, such as positioning, use CSS % after the positioning, to where you want it, then it should be out of place. I’m not sure what the CSS position is of the home button, but add margin-left And navigate the button to where you want it. This should work.

Tip: the position: absolute; CSS position overrides all other elements if they are set to relative, I’m not sure this has any effect on the browser, more of a CSS or html problem.

EDIT: research done. my last solution is set the <meta name="viewport" content="width=device-width, initial-scale=1">. this meta width tag sets a permanent width to all browsers. Your problem may be occuring if you haven’t put this in your <head> part of the website.

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>Webpage Title</title>
    <style>
    /* CSS CODE... */
    </style>
    </head>
    <body>
    <!-- Website Content... -->
    <p>This is a very long paragraph explaining nothing... This paragraph should fit the size of your view-port. > Lorem ipsum, Lorem ipsum, Lorem ipsum.
    </body>
  </html>

paste the your content (CSS Code and Website content) into the following html skeleton abover and it should work properly.