Safari 以不同方式处理定位元素

Question

问题是（在移动设备视图中）chrome 正确并按预期呈现了所有内容，但是使用 safari 时事情发生了变化.. 下面是从这两个页面截取的关于遇到问题的页面的屏幕截图。

chrome 屏幕:
Safari 屏幕：

如您所见，backgound: radial-gradient() 向右移动了一点，这会导致与 Safari 浏览器中的指示器（黑色 background 和 50% radius）不对齐。
这是标记：

    <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 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);
  }
}

javascript 处理指标位置和径向渐变的代码块：

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.

注意事项:

整个项目是用 html5 构建的，纯 css3（由 sass 预处理），vanilla javascript 用于学习前端技术目的。
供应商前缀由 vscode.

live sass compiler

PS:
如果您在 ubuntu 20.04 上运行，如何使用 safari 测试您的网站？我试过 wine 但它让旧版本的 safari（第 5 版）让位，而且它没有派上用场！！

Answer 1

确定不同的浏览器是否支持不同的东西，比如positioning，定位后使用CSS %，到你想要的地方，那应该是不合适的.我不确定主页按钮的 CSS 位置是什么，但是添加 margin-left 并将按钮导航到您想要的位置。这应该有效。

提示：position: absolute; CSS 位置会覆盖所有其他元素，如果它们设置为相对，我不确定这对浏览器有什么影响，更多的是 CSS 或 html 问题。

编辑： 研究完成。我最后的解决方案是设置 <meta name="viewport" content="width=device-width, initial-scale=1">。此元宽度标记为所有浏览器设置永久宽度。如果您没有将其放入网站的 <head> 部分，则可能会出现您的问题。

<!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>

将您的内容（CSS 代码和网站内容）粘贴到以下 html 上面的框架中，它应该可以正常工作。

Safari 以不同方式处理定位元素

Safari handles positioned elements differently

javascript

css

mobile-safari