Bootstrap: v4-beta3 sticky-top not working on safari

[Webotvorba]

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.

[mdo]

Please follow the issue template—what version of Safari? Do you have a live demo? Sticky header works for me in our docs and examples on Safari 11.0.2 for macOS.

[Webotvorba]

Hi on the docs website it is working cos there is correct code:

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

But when I include bootstrap.scss in my scss I get

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

Live demo here:

http://html.webotvorba.sk/123sms/

It is wqorking cos I added it there manually but when you check my css:

http://html.webotvorba.sk/123sms/sources/123sms/css/style-concat.min.css

you will see the first one is generated by bootstrap

[Webotvorba]

bootstrap/scss/utilities/_position.scss

Here is the problem:

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

[Webotvorba]

Well its strange why on the docs site it is generated with 2 conditions and in my css with only one :(

[wolfy1339]

Autoprefixer could be the cause

[Ghost180195]

In your case, you can use position: fixed. Especially browser support will be much more extensive than position: sticky.

[Webotvorba]

@wolfy1339 hi how can I fix this? I tried to install it using nbm bower etc but run into some problems. I want to use the scss files to include into my scss

[XhmikosR]

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

[maroy1986]

This is still not working on Safari, with the released version of Bootstrap 4. I've tried the DOC site has @mdo pointed out above and well, the navbar doesn't stick to the top. I'm testing on a MacBook Pro using Safari 11.0.2. Same goes for iOS mobile devices (going from iPhone 6 up to iPhone X), it doesn't stick to the top, it just scrolls with the rest.

I'm not using the SCSS files to build I own, I'm just importing the already compiled distributed CSS file.

Maybe the distributed generated file isn't fully up to date?

[maroy1986]

Ugh, I had to post in that issue to find out it was a markup error... We are using components in Aurelia and the nav gets wrapped into a custom element (<app-navbar></app-navbar> in our case), which prevents the sticky to be applied properly... So I had to told the framework to render this component without wrapping it into a custom element which makes it started to works immediately. So everything is fine at the end.

[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

[brazenest-zz]

@mdo pinging you as I think my comment answered your original request for info