Breaks for jQuery 3.0.0

[lukasschwab]

Big fan of bigfoot––initially dismayed when I couldn't get it to work on my Jekyll blog.

The problem was that, when the popover box was initially injected, the max-width (set as an element property) was limited to 40.6. I'm not sure where this number was computed, but it made the footnote illegible until I resized the window and the footnote max-width was recalculated.

After much tinkering, I realized that the version of jQuery I was using (the most recent version, 3.0.0) was a different version from 1.8.3 as used in your usage instructions.

I assumed jQuery back-compatibility, apparently incorrectly; when I switched out 3.0.0 for 1.8.3 like suggested, my footnotes worked as they should.

You currently include minimum jQuery requirements in your README, but it'd be great to have a flag that high versions don't work! Alternatively, 3.0.0 compatibility or documentation for a fix for a problem like this one would be much appreciated.

Let me know if you'd like me to recreate the bug!

Thanks

[chibicode]

Mine also fails on jQuery 3 because the max width is too narrow, but it works on jQuery 2.2.4.

[lukasschwab]

@lemonmade it seems like the master branch of bigfoot has been dormant for a while––I saw that last year you mentioned working on a vanilla JS version and other big projects besides.

Are you open to PRs with 1) stopgap docs updates listing jQuery 3.x as incompatible and 2) an eventual jQuery 3.x-compatible fix?

Thanks again for your work! :)

[rdwatters]

@lukasschwab @lemonmade @chibicode BIG fan of the 'foot. That said, I'm having the same issue with the upgrade to jQ 3.0. Any of you guys able to point to this place in the code so that I can try and hack together a solution? Cheers.

[lukasschwab]

I'll take a look at this later, starting with these resources:

• jquery-migrate
• jQuert 3.0 Beta Released: Major Changes

[lemonmade]

Hey folks, sorry for the neglect. I have (and continue to have) a lot going on with work and my upcoming marriage, so I have not had a lot of time to dedicate to my open source projects. I will more than happily accept any contributions to documentation or code to alleviate these issues, and hope to have more time to dedicate to the issues I know this project has in the near future.

[lukasschwab]

No worries, I know how it goes! Congratulations on getting married 😄

I just opened https://github.com/lemonmade/bigfoot/pull/56 to add a little bit of issue documentation to README, and spent some time poking around the code this morning. I've made a little bit of progress.

First of all, I've identified that the bizarre initial width is a product of line 447 of bigfoot.js: maxWidth = Math.min(maxWidth, $this.find(".bigfoot-footnote__content").outerWidth() + 1);

More specifically, $this.find(".bigfoot-footnote__content").outerWidth() returns the unusually small dimension (smaller than the contents of the footnote when it's opened).

My best tentative explanation for this behavior is noted in the documentation for .outerWidth():

The value reported by .outerWidth() is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using .outerWidth(). jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.

I am not sure when this note was made. There are a few possibilities:

• jQuery 3.0.0 removes the "show-and-rehide" functionality.
• The expected value is somehow modified by the documented breaking change to .outerWidth(), which includes the scrollbar.

It is likely a combination of these two. I think my next test will be to ensure that the footnote contents render before being resized. I think this ordering is significant––this is why, after it has been rendered the first time, the footnote is sized correctly.

Looking forward to working on this more!

Edit: it seems that the value of $this.find(".bigfoot-footnote__content").outerWidth() the first time it's called is the same as the left padding of the footnote contents.

[lukasschwab]

This fix has stalled for me––not sufficiently familiar with jQuery or the mechanics of Bigfoot to make much progress.

Cheers!

[donaldboulton]

FIx it in my repo works with jquery 3.2.1 at: bigfoot.min.js

my .sass

i changed some sass to which might make a difference = see repo above

fixed links I went with webpack changed everything try npm install bigfoot@latest and then call it form npm. works with jquery 3.3.1

[kulbhushanchand]

@donaldboulton Hi, your provided link is not correct.

Any chance you can see my issue with bigfoot https://github.com/lemonmade/bigfoot/issues/66

[ondrejmirtes]

In case you're unaware, there's https://github.com/goblindegook/littlefoot that brings this project up to speed with modern standards :)