v4-beta3 sticky-top not working on safari

Hello,

I am just developing website with v4-beta3 and sticky-top is not working. The @supports rule doesnt get applied. I found older post with this code:

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}

When I replace the new code with the old it is working.

[brazenest-zz]

I’ve encountered this problem occurs on:

• Safari 11.0.3 on macOS
• Safari on iOS 11.2.6
• Chrome 65 on iOS
• Firefox 10.6 on iOS
• Edge 41.13 on iOS

… that isn’t an exhaustive list, but it covers the lion’s share of mobile browsing.

For the fix, @Webotvorba has the right idea: we need to add a position: -webkit-sticky rule above the non-prefixed position: sticky one. I’m a fan of wrapping the things in a @supports clause in keeping with the way we currently have written the scss for .sticky-top.

Here’s a codepen: https://codepen.io/aldeng/pen/WzMGdK

Note: the codepen example doesn’t use @supports, because codepen’s env evidently doesn’t correctly expose the client browser’s support for position rules. But I’ve successfully tested the @supports mod locally, outside the codepen env.

The result looks like:

.sticky-top {
  @supports (position: sticky) or (position: -webkit-sticky) {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: $zindex-sticky;
  }
}

… plus, we have to modify the general case where the user can apply .position-sticky to any positioned element.

PR for this mod is https://github.com/twbs/bootstrap/pull/25964

[XhmikosR]

Closing as this isn’t an issue with our code but user integration.