html - 位置 : sticky is back in Chrome 56, 但元素不可见？

Question

当我知道 sticky CSS 属性回归并得到最新的 Chrome 更新支持时，我非常高兴，但令我惊讶的是，该元素出于某种原因是不可见的？

粘性工作得很好，当页面滚动时，元素会粘在其预定义的位置，但由于某些奇怪的原因，该元素完全不可见，所以有人知道这种奇怪的行为吗？

See screen capture

我还注意到，如果父 DIV 使用 overflow: hidden 属性(通常在页面包装器上)，粘性功能将停止工作，这也是一种奇怪的行为，因为许多现代网站使用可滚动的 DIV，并且它们很可能还会为平板电脑和移动设备使用隐藏的抽屉菜单。

但是这种消失的行为呢？

---

更新:

我在 Codepen 中复制了该行为，这里是一个使用与我的开发示例中相同的 HTML 和 CSS 的示例。

See codepen example

我没有包含所有 CSS，只包含显示问题所需的内容，并且我已将问题确定到页脚中的社交媒体菜单，即如果我删除该菜单中的图标 ( <i></i>)，粘性侧边栏再次出现？

<div class="social-menu">
    <ul class="nav nav-pills">
        <li class="nav-item"><a href="" class="nav-link" itemprop="sameAs" target="_blank"><i class="icon i-social-facebook i-3x">Facebook</i></a></li>
        <li class="nav-item"><a href="" class="nav-link" itemprop="sameAs" target="_blank"><i class="icon i-social-twitter i-3x">Twitter</i></a></li>
        <li class="nav-item"><a href="" class="nav-link" itemprop="sameAs" target="_blank"><i class="icon i-social-google i-3x">Google Plus</i></a></li>
        <li class="nav-item"><a href="" class="nav-link" itemprop="sameAs" target="_blank"><i class="icon i-social-instagram i-3x">Instagram</i></a></li>
    </ul>
</div>

---

注意:

问题可以在 Chrome 版本 56.0.2924.87(64 位)中重现

但在 Chrome 版本 57.0.2987.21 beta(64 位)中工作得很好

Answer 1

好吧，由于某种原因，导致粘性元素消失的是图标的 text-indent 属性。

之前:

[class^="i-"], [class*=" i-"] { ... text-indent: -9999px; ... }

之后:

[class^="i-"], [class*=" i-"] { ... text-indent: 9999px; ... }

将 text-indent 从负数更改为正数似乎使粘性元素再次出现。

有点奇怪，因为整个页面都使用了图标，但只有页脚中的图标，这是谁造成的？

---

更新:

正文本缩进 text-indent: 9999px; 在 Safari 中引起了很多奇怪的问题，即保存网页内容的页面包装器突然可以水平滚动 9999 像素。

任何知道如何保持负文本缩进 text-indent: -9999px;，并且仍然让粘性元素 position: sticky; 在 Chrome 中可见的人？

---

解决方法:

啊，找到问题了，既有趣又令人沮丧:)

图标属性中的文本缩进 text-indent: -9999px; 和空格 white-space: nowrap; 的组合，出于某种原因是原因针对水平滚动 (Safari) 和不可见的粘性元素 (Chrome) 这两个问题。

之前:

[class^="i-"], [class*=" i-"] { ... text-indent: -9999px; white-space: nowrap; ... }

之后:

[class^="i-"], [class*=" i-"] { ... text-indent: -9999px; white-space: nowrap; overflow: hidden; ... }

现在一切正常。