Why is my position:sticky not working on iOS?

I feel like an idiot for answering my own question, but I figured out what is causing the problem. I hope this will help developers facing the same problem because I could not find anywhere defining this behavior.

As you can see, in my code, there is a wrapper (specifically a link) around the element, on which I use my position:sticky:

<a href="#" class="jobAlertToggle">
<div id="jobalarm_mobile">
    <i class="fa fa-bell"></i>
    <span>Jobalarm aktivieren</span>
    <label class="switch">
        <input type="checkbox">
        <span class="slider round"></span>
    </label>
</div>
</a>

For some reason, this is not a problem for Chrome or Firefox on Desktop as well as Android, as they seem to ignore this container, probably because it doesn't define any positioning behavior. This is why it works on other devices. However, iOS does not ignore the container and therefor positions the div relative to its parent container, which is the link. After removing the link for test purposes, it worked on all devices.


Some of the tips in my answer here may help, notably adding display: block to your container may do the trick.