Question

一旦我知道最新的Chrome更新回复并支持粘性CSS属性，我感到非常高兴，但令我惊讶的是，该元素出于某种原因不可见？

粘性非常好，元素在页面滚动时会保持预定位置，但元素因某些奇怪的原因完全不可见，所以是否有人知道这种奇怪的行为？

See screen capture

我还注意到如果父DIV使用overflow：hidden属性（通常在页面包装器上），粘滞函数会停止工作，这也是一种奇怪的行为，因为很多现代网站都使用可滚动的DIV他们很可能还使用隐藏的抽屉菜单来安装平板电脑和移动设备。

但是这种消失的行为呢？

更新

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

See codepen example

我没有包含所有CSS，只包含显示问题所需的内容，而且我已将问题解决到页脚中的社交媒体菜单，即如果我删除了图标（{{ 1}}）在该菜单中，粘性侧边栏又出现了吗？

<i></i>

注意：

可以在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;并且仍然可以在Chrome中看到粘性元素position: sticky;的人？

解决方案：

啊，发现这个问题既令人着迷又令人沮丧：）

图标属性中文本缩进text-indent: -9999px;和空格white-space: nowrap;的组合由于某种原因导致了水平滚动（Safari）和不可见粘性元素的问题（铬）。

在：

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

后：

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

现在一切都应该如此。

Answer 2

页面上有一个标题类似的问题，但不仅仅text-indent导致了它。它还存在一个问题，即元素绝对位于页面外（对于屏幕阅读器）。

将overflow: hidden应用于标题元素（具有位置的元素：粘贴），一切似乎都很好。

值得注意的是，我和同事都拥有相同版本的Chrome。在他的机器上，粘性元素消失了，但在我的机器上却没有。所以这可能会受到决议的影响。

这是Codepen使用@ Abstractic演示的分支，但是有一个导致它消失的元素，以及修复它的代码http://codepen.io/dapenguin/pen/pRmoaY

Answer 3

我也从Angular Material Design方面反对这个问题，这个问题表达为mdSubheaders没有在mdDialog中正确显示或粘贴。我在这里创建了一个Codepen（http://codepen.io/ghesla/pen/oZXdmK）来说明问题。单击任一按钮会显示一个对话框，其中包含一系列带有子标题的部分。在具有高像素密度的显示器上观看时（如Retina MacBook pro），副标题内的文本向左移动。

<md-dialog ng-app="MyApp" ng-controller="MyDialogController" class="edit-dialog md-complex-dialog" flex="80" flex-xs="100" layout="column">
  <md-toolbar>
    ...
  </md-toolbar>
  <md-dialog-content layout="column" flex="flex">
    <md-card>
      <md-content>
        <section>
          <md-subheader>
            <span>
              Sub-Header Text
            </span>
          </md-subheader>
          ...
          Section Content
          ...
        </section>
      </md-content>
    </md-card>
  </md-dialog-content>
</md-dialog>

将@ addMitt的评论更多地转移到@ AnthonyJ的答案 - 它似乎与正在使用的显示器的原始分辨率有关。它在我的外部显示器上正常工作，原始分辨率为2560 x 1440，但是当我将浏览器移动到我的MacBook内部Retina显示屏时，其原始分辨率为3360 x 2100，无论我改变什么，它都无法正常显示我在系统偏好显示设置中的解析。

位置：粘贴在Chrome 56中，但该元素不可见？

3 个答案: