Cannot read property 'top' of undefined

[androa]

Using Muscula for collecting client-side JS errors we see a lot of errors like "Cannot read property 'top' of undefined".

It occurs both in the minified and unminified of both in 1.9.0 and 1.9.1. Also tried different combinations of jQuery 1.9.1 and 1.10.2.

Reported line is return g = f.container === d || f.container === b ? e.scrollTop() : a(f.container).offset().top, g >= a(c).offset().top + f.threshold + a(c).height() and when I've tried it with the unminfied version I've confirmed that this is https://github.com/tuupola/jquery_lazyload/blob/master/jquery.lazyload.js#L206.

Muscula reports in to be happening in the following browsers: Android 4.1, Android 4.2, Android 4.3, Chrome 11, Chrome Mobile 18, Maxthon 4.1, Mobile Safari 6

I use the plugin like this:

$('img.lazy-load').lazyload({ 
    'threshold': 1000, 
    'failure_limit': 4 
});

All elements targeted have CSS rules setting display: block.

Unable to reproduce in a controlled environment.

[tuupola]

Did I understand correctly errors can be seen only when using Muscula but not in browser console? Do you have example page online? Are the width and height set for images either as attributes or in css?

[androa]

Well, since I'm unable to reproduce, I've never seen them in the console, only through Muscula. On the clients I think its safe to assume they appear in consoles.

We use it on the front-page of http://www.vg.no/, but we currently only have Muscula activated for mobiles (spoof your user-agent).

Our sizing regime is a bit complex: we set 100% height & width on the img-element (with CSS) and uses a block container which uses all available width. The container uses a percentage value for padding-bottom which gives us a responsive image container that scales proportionally.

[royaldark]

Did anything more come out of this? We are seeing this exact issue, with thousands of these error messages being logged in our client-side JS error tracker.

We are seeing the error in all major current browsers:

1. Safari 7+
2. Mobile Safari 8+
3. Google Chrome 35+
4. IE 10+
5. Firefox 27+

I haven't been able to reproduce locally, but obviously it's happening. I don't know how it manifests itself from the user's point of view either, since I haven't been able to repro myself.

Any further information on this topic would be very helpful.

[androa]

Sadly not from my end. I were never able to reproduce it in my own browser so I could debug it further. It is still happening though.

[tuupola]

@royaldark You are also using Muscular?

[dan2k3k4]

I think it's something to do with the container: $(elem) - being empty/not found in DOM ?

[royaldark]

@tuupola No, we use TrackJS.

I believe I've found what causes the issue, though. If a lazy-loaded <img>'s container is removed from the DOM before the image loads, this error will be thrown. I discovered this on a slow network, when I would sometimes navigate to a different part of our app before the lazy loaded images were loaded and would see the error.

[jackple]

@royaldark Have you fixed it?

[royaldark]

@jackple We stopped using this library - sorry!