Position off for absolutely positioned input in Safari - html

Question

I have this very strange issue in Safari, both desktop and iOS. Here is a screenshot of what is currently happening (again, both iOS and desktop Safari):
And here is a picture of what should be happening (taken from Chrome on Mac, but also confirmed the same in Android Chrome and Firefox):
Here is the HTML:
<label class="radio-selections" for="maleSelection">Male
<input type="radio" value="male" id="maleSelection" name="gender">
</label>
And here is the 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)
}
}
}
I think it could be well understood what I'm lacking here, but why is the "checked" styling in iOS and Safari offset, while in all other browsers it is overlapping as it should?
Here is also a pretty simple codepen that pretty much outlines what I'm looking for (obviously works in Chrome, but not in Safari):
https://codepen.io/adammcgurk/pen/wvvJWry

Answer 1

Use position: relative; on parent when ever you make any element absolute so that it adjust itself according to its parent.
label.radio-selections {
position: relative;
}
and then on child make left right top and bottom to 0
input[type=radio] {
left: 0;
right: 0;
bottom: 0;
top: 0;
}