Sticky element goes below the parent element instead of stay at the end of the parent on firefox
Opened this issue · 6 comments
@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
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
Anyone have a fix for this?
EDIT
Actually just wrapped lines 43 & 45 in Math.floor()
. Will this effect anything else?
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.
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.
It solved my issue too, I use a fluid layout with flexbox grid by Foundations 6.
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.
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.