CSS元素的定位在Safari中移动了一半（但在Chrome中很好）

Question

我在Chrome中正确定位了一个元素（工作正常），但在Safari中，它的关闭率为50％。一般CSS并没有让我感到困惑，但这一点确实存在。我在反应中构建了所有内容，这不应该对CSS产生任何影响（我只是为了参考而说明这一点）。

我遇到的问题的代码是：

margin-left: 50px;
background-color: white;
transform: rotate(120deg);
height: 38px;
width: 38px;
border-radius: 50%;
color: white;
position: absolute;
background: white;
transition: all 250ms;
-webkit-transition: all 250ms;
overflow: hidden;

编辑HTML ADDED

    <div>
  <div class="jbRhCt" style="align-items: center; position: absolute; width: 100%; margin: 0px; padding: 0px; justify-content: center;">
    <div class="dbgKej">
      <div class="fCJbKH" style="background: rgb(31, 139, 179);">
        <div class="ijNdlz" style="margin-left: 26px;">

        </div><div class="hOzhhR" style="margin-left: 72px;">

        </div><div class="bPQgoG" style="margin-left: 120px;"></div>
        <div class="dMJdoh" style="background: white; transform: rotate(120deg); margin-left: 50px;">
          <div class="czTFjn" style="opacity: 1;"></div>
          <div class="bbrObs" style="opacity: 1;"></div>
          <div class="ftVltL" style="opacity: 1;"></div>
          <div class="fqOkrX" style="opacity: 0;"><div class="enUBsj" style="opacity: 0;"></div>
          <div class="bSIUmO" style="opacity: 0;"></div></div></div>
            <p class="iWgihJ" style="margin-left: -40px; color: white;">The Light!</p>
          </div>
        </div>
      </div>
    </div>

它偏离顶部和右边，我不确定为什么。作为参考，在Chrome中它的外观（白色月亮）

在Safari中它看起来像是

知道这里发生了什么吗？

Answer 1

不同的浏览器具有不同的绝对定位初始点。因此，请指定坐标，例如：right: 0; top: 0;

Answer 2

很难说没有相应的html和父元素的CSS。由于它绝对定位，可以尝试添加right: 0;

如果将月亮从按钮中抛出，请在父元素上使用position: relative;。