Does not work on Safari

[pthompson]

Thanks for forking and giving sticky-sidebar some needed love!

It works great for me on Firefox and Chrome, but doesn't work on Safari.

On the desktop version of Safari on a Mac it doesn't work at all.

On the mobile version of Safari on an iPad it works to a point, but then the sidebar content starts scrolling up and down incessantly.

[pthompson]

There were two issues:

1. The sticky-sidebar was not working on Safari.

This was due to Safari rendering my page differently than Firefox and Chrome. It perceived the content size as being half of what it was, so the sticky-sidebar never was activated. I resolved this by modifying my CSS.

2. When the page reached the bottom, the sidebar content would continuously flicker, jumping up and down by a few pixels.

This was resolved by @Dryymoon's pull request. We can close this issue as soon as that PR is integrated.

FYI, for anyone implementing a Phoenix LiveView app, this is what my JavaScript hook looks like:

Hooks.StickySidebar = {
  mounted() {
    this.stickySidebar = new StickySidebar('#sidebar', {
      topSpacing: 18,
      bottomSpacing: 16,
      containerSelector: '#main-content',
      innerWrapperSelector: '.sidebar__inner',
    })
    var _this = this
    window.addEventListener('load', event => {
      _this.stickySidebar.updateSticky()
    })
    setTimeout(function () {
      _this.stickySidebar.updateSticky()
    }, 500)
  },
  updated() {
    this.stickySidebar.updateSticky()
  },
  destroyed() {
    this.stickySidebar.destroy()
  },
}

[blixhavn]

@pthompson Hey, thanks a lot for submitting an issue! :) I'm glad an existing PR fixes the problem, but the PR in question is not completely straight forward to merge. Would you care to have a look at my latest comment there?

[blixhavn]

Closing this issue as #9 is now merged