Search code examples
htmlcsspositioncss-position

Position off for absolutely positioned input in Safari

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): enter image description here

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): enter image description here

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

Solution

  • 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;
}