Position: sticky is back in Chrome 56, but the element is invisible?

Alright, for some reason it was the text-indent attribute in for the icons that was causing the disappearing sticky element.

Before:

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

After:

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

Changing the text-indent from negative to positive seems to have made the sticky element appeared again.

It's a bit weird, because there are icons used all over the page, but it was only the icons in the footer, who was causing this issue?

Update:

A positive text indent text-indent: 9999px; is causing a lot more strange issues in Safari, i.e. the page wrapper which holds the web content in place, is suddenly 9999 pixels horizontally scrollable.

Anyone who knows how to keep the negative text indent text-indent: -9999px;, and still get a sticky element position: sticky; to be visible in Chrome?

Solution:

Ah, found the issue, which was both fascinating and frustrating :)

A combination of text indent text-indent: -9999px; and white space white-space: nowrap; in the attributes for icons, were for some reason the cause for the both issues with a horizontal scroll (Safari) and an invisible sticky element (Chrome).

Before:

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

After:

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

Now everything behaves as it should.

Had a similar issue with a header on the page, but it wasn't just text-indent that caused it. It also had an issue with elements being absolutely positioned off page (for screen readers).

Applied overflow: hidden to the header element (the element that had position: sticky) and all seems well.

It's also interesting to note that myself and a colleague both had the same version of Chrome. On his machine, the sticky element disappeared, but on my one it didn't. So maybe this is affected by resolution.

Here's a Codepen using a fork of @Abstractic's demo, but with an element that causes it to disappear, along with the code to fix it http://codepen.io/dapenguin/pen/pRmoaY

I've come up against this issue as well from the Angular Material Design side, the issue expressing itself as mdSubheaders not displaying or sticking properly inside of a mdDialog. I've created a Codepen here (http://codepen.io/ghesla/pen/oZXdmK) that illustrates the issue. Clicking on either button shows a dialog with a series of sections with subheaders. When viewed on a display with a high pixel density (like a Retina MacBook pro), the text inside the subheader is shifted to the left.

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

Taking @addMitt's comment to @AnthonyJ's answer a bit further - it appears to have something to do with the native resolution of the display being used. It is working properly on my external display with a native resolution of 2560 x 1440, but when I move the browser to my MacBook's internal Retina Display with a native resolution of 3360 x 2100, it doesn't display properly, regardless of what I change my resolution to in the system preferences display settings.