Bootstrap: Affix Plugin Flickering at bottom in IE (8 - 11)

[seanriceaz]

Affix appears to be removing and re-adding the "affix-bottom" class to the affixed element at the bottom of the screen as the user scrolls in small increments up/down.

This is especially noticeable when the footer is very tall, and the affixed element is tall as well.

You can see it happening in IE on the bootstrap site overlapping the footer:

Perhaps this has to do with a pixel-rounding issue, or maybe the scroll event handling is strange in IE?

[cvrebert]

Have you tested against the bleeding-edge code in the master branch?

[seanriceaz]

This is a duplicate of #12153
Though it appears to be happening in several versions of IE.

(Sorry about not doing a good enough search!)

[seanriceaz]

@cvrebert I have not. I'll try that right now.

[seanriceaz]

@cvrebert Turns out, I was using the "bleeding edge" code already. The problem persists.

[seanriceaz]

Reopening this. The other thread (#12153 ) isn't as descriptive as to how to replicate the issue. Perhaps the better description above will shine some light on the subject...

[supergibbs]

I had a similar issue (on all browsers). When the vertical scroll was just barely needed and I affixed a navbar near the top after scrolling it up some. When the navbar gets affixed, the page loses it's height which causes the scrolling to go away and then the navbar to come down and become un-affixed and return the scrollbar. This results in a jitter not unlike the above issue.

I solved it by replacing the height when affixed with another element. I'll try to get an example up soon.

Hope this helps

[supergibbs]

Check this out! (fixed)

http://jsfiddle.net/Supergibbs/jPEE5

[mrami0]

I have the same problem with IE11, Windows 7 and Bootstrap v3.1.1.
Only in IE, the rest of browsers (Chrome 32, Firefox 26) works fine.

The fix with min-height from @supergibbs doesn't work for me.

This is the problem reproduced in getbootstrap.com:

[cvrebert]

Please re-test against the latest master code again. A couple of fixes have been made to Affix since your previous round of testing.

[cvrebert]

@seanriceaz @kaperu Could you re-test against the latest master branch code?

[seanriceaz]

I don't have IE handy today. I'll try and get to this sometime over the next few days. I really appreciate your following up though. Sorry for the delay!

[seanriceaz]

I just tested this and it still has the flickering problem in IE 11

[saucecontrol]

This is still happening in 3.2.0 release. Easy repro, go to http://getbootstrap.com/customize/ in IE11, sroll to bottom of the page, scroll slowly back up.

Rolling back #13541 fixes it.

[XhmikosR]

CC @fat

[fat]

ha can't win with this plugin

[gpakosz]

@saucecontrol #13541 fixes it for IE but worsens the situation for other browsers. I believe the analysis I did in #13541 is correct.

[mdo]

Punting on this. I'd still love to see a fix, but it's not paramount we address this given v3's trajectory.

[gpakosz]

@mdo what's the benefit of closing this exactly? one more greenlight?

imho leaving it open == acknowledging the issue exists.
fixing it, in whatever milestone is another story

[mdo]

Big changes are in for v4 and we're punting on non-critical fixes from here out to prep for that.

[beloculus]

Just to circle back on this in case anyone else finds this thread after encountering this issue:

I was experiencing it in 3.2.3, but upgrading to 3.3.6 fixed the issue for me. So, despite the fact that this issue was closed, it seems to have been fixed anyway?

[gleighfield]

The above worked for me - many thanks @beloculus