为什么我的position：sticky在iOS上不起作用？

我正在编码位于移动屏幕底部的粘性通知栏.我希望将条形图停留在用户屏幕的底部,直到用户到达代码中条形图实际所在位置的滚动位置为止(该位置恰好在页面页脚之前).
我已经从以下页面复制了“医生”示例：https://alligator.io/css/position-sticky/
我的问题是：在页面上,使用Android设备或通过调整台式机上的浏览器宽度来模拟移动设备时,该栏都可以正常工作.但是,在iOS上,该条并不粘滞,即,它只是位于其位置,直到到达时才粘在屏幕底部.这适用于Safari和Google Chrome.
奇怪的是：在前面提到的alligator.io页面上,它在我的iOS设备上运行正常.

我怀疑这是某种Webkit问题,与工具栏周围的代码有关,但是我无法隔离它.我尝试通过尽可能地将代码调整到alligator.io中的示例来调试,但是我无法使其正常工作.我也尝试过在父元素中寻找任何溢出：自动-没有成功.我已经尝试修复了几个小时,对此问题感到厌倦,可以用另一双眼睛帮助我找到我所忽略的内容.

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

#jobalarm_mobile {
    display: table;
    font-size: 18px;
    width: 100%;
    height: 40px;
    background: #ff8400;
    color: white;
    font-weight: 400;
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    bottom: -50px;
    align-self: flex-end;
}

您可以访问我正在处理的实时页面(应客户要求隐藏,请私下与我联系).
只需开始任何(建议的)搜索,该栏就会弹出(如果您使用的是iOS,则不会弹出…)
在此先感谢您的帮助.

最佳答案

我觉得自己回答我的问题很白痴,但我弄清楚是什么原因引起的.
我希望这将有助于开发人员面对相同的问题,因为我找不到任何定义此行为的地方.

如您所见,在我的代码中,元素周围有一个包装器(特别是链接),在该包装器上我使用了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>

出于某种原因,对于台式机上的Chrome或Firefox以及Android而言,这并不是问题,因为它们似乎忽略了此容器,可能是因为该容器未定义任何定位行为.这就是为什么它可以在其他设备上运行的原因.但是,iOS不会忽略容器,因此div相对于其父容器(即链接)进行定位.删除链接以进行测试后,它可以在所有设备上使用.

为什么我的position：sticky在iOS上不起作用？

相关推荐