leafo/sticky-kit

Sticky element goes below the parent element instead of stay at the end of the parent on firefox

Opened this issue · 6 comments

jothanluna commented

@leafo I have this problem only on firefox, my sticky element goes below the parent instead of stay at the end of the parent on firefox, my footer disapears too and i dont know what is happen, can somebody helps me? if you go to this url: http://front.delitogo.mx/restaurantes/13 yo can see an expample in chrome goes well but firefox is the problem

Chrome:
screen shot 2016-05-05 at 8 11 03 pm

Firefox:
screen shot 2016-05-05 at 8 11 15 pm

michaelrachlitz commented

I experienced this issue too, it happens due to badly rounded pixels. Your sidebar probably has width declared in percentages, and when the percentage has to round from a decimal the browser does its best, however the sticky-kit seems to round a little different meaning you end up with 1 pixels too many.
It can be fixed by declaring width in pixels - or I guess the script could be changed to round to lowest pixels for safety

skillmatic-co commented

Anyone have a fix for this?

EDIT

Actually just wrapped lines 43 & 45 in Math.floor(). Will this effect anything else?

aaroncrawford commented

I agree with @michaelrachlitz - there seems to be a rounding issue when it comes to fluid layouts based on percentages. I applied a Math.floor to the width and it seems to have fixed it across all widths/breakpoints. Try this file instead.

http://d.pr/f/1ltmf

  • 👍1
geosigno commented

I agree with @michaelrachlitz - there seems to be a rounding issue when it comes to fluid layouts based on percentages. I applied a Math.floor to the width and it seems to have fixed it across all widths/breakpoints. Try this file instead.

http://d.pr/f/1ltmf
by @aaroncrawford

It solved my issue too, I use a fluid layout with flexbox grid by Foundations 6.

jfcartier commented

Here's a simple case fixed.
I use bootstrap 3 and have this layout

<div class="row">
  <div class="col-md-9">Main</div>
  <div class="col-md-3">Sidebar to snap</div>
</div>

Since the container of the side change from px to % at some point, having a fixed value instead of % value make it glitch a bit. I tried to put underscore (debounce) to fix it but it's still not perfect.
So I just removed this line from the library :

width: elm.outerWidth(true),

In my case, I simply don't need to know the spacer width since it's content already does this job.

Anyhow, this is certainly not a good fix since I don't know all the repercussion, but for me it worked fine.

dominicht commented

I ran across a similar issue where the Math.floor solution didn't solve the problem if the browser was Zoomed in. I ended up using the following to make sure I'm actually applying a percentage width to the parent element instead of a pixel width:

.on("sticky_kit:stick", function(e) {
        $(this).parent().css('width', $(this).width() / $(this).parent().parent().width() * 100 + '%');
});

Not sure how well this performs, but it did the trick for me.

  • 👍1