CODEWITHSUNDEEP
htmlcssgoogle-chromecss-position
Abstractic
Abstractic

Reputation: 195

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

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

The stickiness works perfectly fine, the element sticks to its predefined position as it should when the page is scrolled, but the element is totally invisible for some strange reason, so is there anyone who knows anything about this weird behaviour?

See screen capture

I've also noticed that the sticky function stops working if a parent DIV uses the overflow: hidden attribute (normally on a page wrapper), which also was a kind of weird behaviour, because many modern websites uses scrollable DIVs and they most likely also uses a hidden drawer menu for tablet and mobile devices.

But how about this disappearing behaviour?

Update:

I replicated the behaviour in Codepen and here's an example with identical HTML and CSS as used in my development example.

See codepen example

I did not include all CSS, only what's needed to show the issue, and I've nailed down the problem to the social media menu in the footer, i.e. if I remove the icons (<i></i>) in that menu, the sticky sidebar appears again?

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

Issue can be replicated in Chrome Version 56.0.2924.87 (64-bit)

But works totally fine in Chrome Version 57.0.2987.21 beta (64-bit)

Upvotes: 4

Views: 1231

Answers (3)

Greg
Greg

Reputation: 11

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.

Upvotes: 1

AnthonyJ
AnthonyJ

Reputation: 66

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

Upvotes: 1

Abstractic
Abstractic

Reputation: 195

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.

Safari text indent issue

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.

Upvotes: 3

Related Questions