Position: sticky returned in Chrome 56, but the item is invisible?

Question

I was very happy when I realized that the sticky CSS attribute was back and supported by the latest Chrome update, but, to my surprise, is the element invisible for some reason?

Stickiness works fine, the element adheres to its predetermined position, as when scrolling the page, but the element is completely invisible for some strange reason, is there anyone who knows anything about this strange behavior?

See screen capture

I also noticed that the sticky function stops working if the parent DIV uses the overflow attribute: hidden (usually on the page wrapper), which was also kind of weird behavior, as many modern websites use scrollable DIVs, and they most likely also use hidden menu of boxes for tablets and mobile devices.

But what about this disappearing behavior?

---

Update:

I reproduced the behavior in Codepen, and here is an example with the same HTML and CSS, which is used in my development example.

See codepen example

I didn’t include all the CSS, only what needed to be shown, and I attached the problem to the social networks menu in the footer, that is, if I remove the icons ( <i></i>) in this menu, will the sticky sidebar reappear?

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

---

Note:

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

, , , , ?

---

Update:

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

, .

Answer 2

, text-indent. , ( ).

overflow: hidden ( : ), .

, Chrome. , . , .

Codepen @Abstractic demo, , , , 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>

Taking the @addMitt comment for @AnthonyJ, answer a little further - it seems to have something to do with the native resolution of the display used. It works correctly on my external display with a native resolution of 2560 x 1440, but when I move the browser to my internal MacBook Retina Display with a native resolution of 3360 x 2100, it does not display properly, regardless of the fact that I change my resolution in the settings system settings.