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?

@Seabizkit Here is the error: https://pastebin.com/gEr9Hay4 thanks for helping me! — Marco Burgman, Jun 19 '20 at 10:58
https://stackoverflow.com/questions/51681100/jqmigrate-jquery-fn-offset-requires-an-element-connected-to-a-document — Seabizkit, Jun 19 '20 at 11:13
@Seabizkit yes I tried that, but got many errors more, so either I implemented it wrongly or I don't really understand what the other stack question solution means. Could you help me? — Marco Burgman, Jun 19 '20 at 11:38

score 1 · Answer 1 · answered Jun 19 '20 at 12:12

Source: https://github.com/jquery/jquery-migrate/blob/master/warnings.md#jqmigrate-jqueryfnoffset-requires-a-valid-dom-element

JQMIGRATE: jQuery.fn.offset() requires a valid DOM element Cause: In earlier versions of jQuery, the .offset() method would return a value of { top: 0, left: 0 } for some cases of invalid input. jQuery 3.0 throws errors in some of these cases. The selected element in the jQuery collection must be a DOM element that has a getBoundingClientRect method. Text nodes, the window object, and plain JavaScript objects are not valid input to the .offset() method. jQuery may throw an error in those cases but in general does not guarantee specific results with invalid inputs.

Solution: Do not attempt to get or set the offset information of invalid input.

my understanding is that $viewportElement is null/undefined when it should have a value.... so you need to trace why that is the case.... or handle when its not valid.

// As of jQuery 3.0, .offset() only works for elements that are currently
// in the document. In earlier versions, this would return the value below
// but in jQuery 3.0 this throws an error.

//so we are defualting it to a value and use this instead.
var parentOffset = {top: 0, left: 0};

// If the element is in the document we are safe to use .offset()
if(document.body.contains($viewportElement[0])) {
    parentOffset = $viewportElement.offset();
}

//###########

var viewportOffsets = parentOffset;

//this will now neever be null or undefined as we set it above.
//this is not where it was failing... it was failing before this 
hasOffsets = viewportOffsets !== null && viewportOffsets !== undefined;


//but the above code would try an ensure that .offset();
// when .offset(); is called on something that does not exist it defaults to what > 3.0 would of done....

score 0 · Accepted Answer · answered Jun 19 '20 at 12:12

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

Amazing! missed this pull request! (still getting this error JQMIGRATE: jQuery.fn.offset() requires an element connected to a document) 9/10 down, thanks! — Marco Burgman, Jun 19 '20 at 12:20

Migrating from jQuery 1.12.4 to 3.3.0 issues

2 Answers2