Affix flickering on iOS 8.2

[maikokuppe]

If I touch the screen in order to scroll down, while the navigation bar is not yet at the upper edge of the view (it's below it), and I'm scrolling down such that the original navigation bar position moves out of sight (still touching the screen), this is the moment the flickering starts.

The line js/affix.js:53 is the reason for this issue:

var colliderTop = initializing ? scrollTop : position.top

Why not replace it by

var colliderTop = scrollTop

? This way it works fine.

[pierrebeitz]

+1

[zacechola]

Would you mind posting a jsbin or jsfiddle showing an example of this?

[cvrebert]

Check the git blame for that line and you should be able to find out what made that ternary necessary.

[maikokuppe]

The code in question was committed here:
8c0eb9b

There is no explanation given on why scrollTop is just used once for initialization and position.top otherwise.
Until this change, only scrollTop was used (as I proposed in the first comment).

[cvrebert]

@charlesbjohnson Do you happen to recall the reason for the initializing logic here?

Interestingly, making the suggested change doesn't break any unit tests in any browser.

[charlesbjohnson]

@cvrebert making the change wont' break any tests because there aren't any unit tests. This could only be tested visually.

I can't recall the exact reasoning behind the initializing logic right now but it was for affixes that fix to the bottom of the viewport for pages with dynamic height. If you are going to make any changes to it then please visually test both types of affixes. Additionally, when testing the bottom affix please also make sure it is not flickering or jumping when the document height changes. The visual test has all of this already set up.

Take a look at the PR I made last year. In the diff comments there are some gifs and other explanations.

[Glark]

The above fix solved my iOS affix flicker issues too.

[nuttt]

I've tested on iOS 8.4 and it works when using affix with top-fixed navigation bar.

[a2f0]

This fix is a gift. Thank you.

[mdo]

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team