Safari 中绝对定位输入的定位关闭

Question

我在桌面和 iOS 的 Safari 中都遇到了这个非常奇怪的问题。这是当前发生的情况的屏幕截图（同样，iOS 和桌面 Safari）：

这是应该发生的事情的图片（取自 Mac 上的 Chrome，但在 Android Chrome 和 Firefox 中也证实了这一点：

这里是 HTML:

<label class="radio-selections" for="maleSelection">Male
    <input type="radio" value="male" id="maleSelection" name="gender">
</label>

这里是 CSS:

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

    }

}

我认为可以很好地理解我在这里缺少什么，但为什么 "checked" 样式在 iOS 和 Safari 中偏移，而在所有其他浏览器中它应该重叠？

这也是一个非常简单的 codepen，它几乎概述了我正在寻找的内容（显然在 Chrome 中有效，但在 Safari 中无效）：

https://codepen.io/adammcgurk/pen/wvvJWry

Answer 1

在制作任何元素 absolute 时在 parent 上使用 position: relative; 以便它根据其 parent.

进行自我调整

label.radio-selections {
  position: relative;
}

然后在 child 上使 left right top 和 bottom 到 0

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

Safari 中绝对定位输入的定位关闭

Position off for absolutely positioned input in Safari

html

css

position

css-position