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

Question

我正在编写位于移动屏幕底部的粘性通知栏。我希望该栏卡在用户屏幕的底部，直到用户到达该栏在代码中实际定位的滚动位置（就在页面页脚之前）。我已经从这个页面复制了“医生”示例： https ://alligator.io/css/position-sticky/ 我的问题是：在我的页面上，当使用 Android 设备或模拟移动设备时，该栏工作正常通过调整我的台式计算机上的浏览器宽度。然而，在 iOS 上，该栏不是粘性的，即它只是坐在它的位置上，并且在到达之前不会粘在屏幕底部。这适用于 Safari 和 Google Chrome。奇怪的是：在前面提到的 alligator.io 页面上，它在我的 iOS 设备上运行良好。

我怀疑这是与栏周围的代码有关的某种 Webkit 问题，但我无法隔离它。我已经尝试通过将我的代码尽可能地调整为 alligator.io 中的示例来进行调试，但我无法让它工作。我也尝试在父元素中寻找任何溢出：自动 - 没有成功。我已经尝试解决这个问题几个小时，并且厌倦了这个问题，并且可以用另一双眼睛帮助我找到我忽略的东西。

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

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

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

原文由 c42 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

回答自己的问题时，我觉得自己像个白痴，但是我弄清楚了导致问题的原因。我希望这将帮助开发人员面临同样的问题，因为我找不到任何定义这种行为的地方。

如您所见，在我的代码中，元素周围有一个包装器（特别是链接），我在其上使用我的位置：粘性：

 <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 相对于其父容器（即链接）定位。出于测试目的删除链接后，它可以在所有设备上运行。

原文由 c42 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于我的问题是：

我有{包含：油漆； } 在祖先中（容器内部容器之上）。

将其更改为 { 溢出：剪辑； }

如果包含：无论是否溢出，都存在油漆，粘性将不起作用：剪辑。

这是在 Iphone 15.4.1 上测试的。其他测试设备没有中断包含：paint（在 chrome、ipad、android 上测试）

原文由 Nathan Dunn 发布，翻译遵循 CC BY-SA 4.0 许可协议