Migrating from jQuery 1.12.4 to 3.3.0 issues

Question

After following the guide at the jQuery github I eliminated 8/10 issues if I want to upgrade. However I am having 2 issues which I can't solve myself or with the help of google. Please have a look:

JQMIGRATE: jQuery.fn.offset() requires a valid DOM element

            var viewportOffsets = this.$viewportElement.offset(),
                hasOffsets = viewportOffsets !== null && viewportOffsets !== undefined;

            this.viewportWidth = this.$viewportElement.width();
            this.viewportHeight = this.$viewportElement.height();

            this.viewportOffsetTop = (hasOffsets ? viewportOffsets.top : 0);
            this.viewportOffsetLeft = (hasOffsets ? viewportOffsets.left : 0);
        },

And the following, JQMIGRATE: jQuery.fn.offset() requires an element connected to a document

$backgroundElements.each(function() {
                var $this = $(this),
                    backgroundPosition = getBackgroundPosition($this),
                    horizontalOffset,
                    verticalOffset,
                    positionLeft,
                    positionTop,
                    marginLeft,
                    marginTop,
                    offsetLeft,
                    offsetTop,
                    $offsetParent,
                    parentOffsetLeft = 0,
                    parentOffsetTop = 0,
                    tempParentOffsetLeft = 0,
                    tempParentOffsetTop = 0;

                // Ensure this element isn't already part of another scrolling element
                if (!$this.data('stellar-backgroundIsActive')) {
                    $this.data('stellar-backgroundIsActive', this);
                } else if ($this.data('stellar-backgroundIsActive') !== this) {
                    return;
                }

How do I solve this?

Answer 1

This jQuery plugin, Stellar.js, is no longer maintained. There is a pull request from 1 Apr 2018 that fixes this issue and makes it compatible with jQuery 3.2.1, but it never got merged.

You can view the changes here jquery.stellar.js and change it manually:

Change this:

var viewportOffsets = this.$viewportElement.offset(),

Into this:

var viewportOffsets = this.$viewportElement[0] !== window ? this.$viewportElement.offset() : {top: 0, left: 0},

Or better yet, fork the repo, apply the PR and have the whole updated jquery.stellar.js to use in your site/app.

You can also use the contributors fork that has the commit supporting jQuery 3.2.1 from here: https://github.com/sancas/stellar.js