Положение выключено для абсолютно позиционированного ввода в Safari

Question

У меня очень странная проблема в Safari, как на рабочем столе, так и на iOS. Вот скриншот того, что происходит в данный момент (опять же, iOS и настольный Safari):

А вот картинка того, что должно происходить (взято из Chrome на Mac, но также подтвердил то же самое в 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)
        }

    }

}

Я думаю, что вполне понятно, чего мне здесь не хватает, но почему «проверенный» стиль в iOS и Safari смещен, тогда как во всех других браузерах он перекрывается какэто должно быть?

Вот также довольно простой кодовый блок, который в значительной степени обрисовывает в общих чертах то, что я ищу (очевидно, работает в Chrome, но не в Safari):

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

Answer 1

Используйте position: relative; на родительском элементе, когда вы делаете какой-либо элемент absolute, чтобы он настраивался в соответствии с его родителем.

label.radio-selections {
  position: relative;
}

, а затем на дочернем элементе - left right top и bottom для0

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