Html 为Safari中绝对定位的输入设置“关闭”

我在Safari中有一个非常奇怪的问题，桌面和iOS。以下是当前再次发生的情况的屏幕截图，包括iOS和桌面Safari：

下面是一张从Mac上的Chrome上拍摄的照片，但也证实了Android Chrome和Firefox上的情况：

以下是HTML：

我想这可以很好地理解我这里缺少的东西，但是为什么iOS和Safari中的选中样式是偏移的，而在所有其他浏览器中它是重叠的呢

这里还有一个非常简单的代码笔，它大致勾勒出了我要寻找的东西，显然在Chrome中有效，但在Safari中无效：

使用位置：相对位置；当您将任何元素设置为绝对元素以便它根据其父元素进行自我调整时，在父元素上

label.radio-selections {
  position: relative;
}

然后在“子对象”上，将“左上右下”设置为0

---

非常感谢。对于后人来说，我要做的另一件事是将输入的宽度设置为100%，以获得正确的设计

label.radio-selections {

    width: 95%;
    max-width: 400px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--dark-gray);
    transition: box-shadow 100ms;
    border-radius: 6px;

    input[type=radio] {
        apperance: none;
        -webkit-appearance: none;
        height: inherit;
        width: inherit;
        max-width: inherit;
        position: absolute;
        border-radius: 6px;
        z-index: -1;
        background-color: transparent;
        cursor: pointer;
    }

    &[for=femaleSelection] {
        box-shadow: 0 1px 7px 3px rgba(147,64,169,.65);

        &:active {
            box-shadow: 0 1px 7px 1px rgba(147,64,169,.35);
        }

        input[type=radio]:checked {
            background-color: rgba(147,64,169,.15)
        }

    }

    &[for=maleSelection] {
        box-shadow: 0 1px 7px 3px rgba(64,93,169,.65);

        &:active {
            box-shadow: 0 1px 7px 1px rgba(64,93,169,.35);
        }

        input[type=radio]:checked {
            background-color: rgba(64,93,169,.15)
        }

    }

}

label.radio-selections {
  position: relative;
}

input[type=radio] {
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
}