diydrones.com - fails inserting new content correctly on scrolling down due to outdated jQuery

[webcompat-bot]

URL: http://diydrones.com/m?id=705844%3AMobilePage%3A857813
Browser / Version: Firefox Mobile 36.0
Operating System: Android
Problem type: Looks like the website has a bug.
Site owner: No

Steps to Reproduce

1. Navigate to: http://diydrones.com/m?id=705844%3AMobilePage%3A857813
2. scroll down

Expected Behavior:display new blog entries
Actual Behavior:displays last blig entry over and over

[hallvors]

Whenever you scroll to the bottom of the page, the page starts loading new content. However, it ends up adding the same entry again and again!

Loading data, this code is involved:
x$(_d.html).hide().appendTo(_a).trigger('create').fadeIn('slow');

_d.html is the new list of articles from the server. A bit further down the stack, we hit this code:

this.each(function () {
        var b = p.queue(this, a, c);
        p._queueHooks(this, a),
        a === 'fx' && b[0] !== 'inprogress' && p.dequeue(this, a)
      })
    },

The each command will loop through all nodes in a DOM fragment - including text nodes. And if a text node a is passed to this code:

  function bZ(a, b) {
    return a = b || a,
    p.css(a, 'display') === 'none' || !p.contains(a.ownerDocument, a)
  }

it will throw because p.css() relies on getComputedStyle() which doesn't expect to be used with text nodes. I've verified that this error causes the problem.

I'm not sure why this doesn't occur in other browsers. Perhaps the script uses a DOM parser that creates text nodes for whitespace in Firefox and uses a different approach in other browsers?

[hallvors]

Actually, getComputedStyle() doesn't throw in Chrome even if you pass a text node to it. That's why the failure occurs only in Firefox.

[hallvors]

Test: http://hallvord.com/temp/moz/bug/wc412.htm

[hallvors]

This is basically failing in jQuery code

g = a.length;
for (; f < g; f++) {
  c = a[f];
  if (!c.style) continue; // this line fixes the problem
  e[f] = p._data(c, 'olddisplay'),
  b ? (!e[f] && c.style.display === 'none' && (c.style.display = ''), c.style.display === '' && bZ(c) && (e[f] = p._data(c, 'olddisplay', cc(c.nodeName))))  : (d = bH(c, 'display'), !e[f] && d !== 'none' && p._data(c, 'olddisplay', d))
}

Which means their jQuery library is outdated since jQuery on GitHub has exactly the same fix I added above - here:
https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L161

We should suggest that they update jQuery.

[hallvors]

Bugs to make sure other browsers follow the spec too:
https://bugs.webkit.org/show_bug.cgi?id=138584
https://code.google.com/p/chromium/issues/detail?id=431915

[karlcow]

This has been fixed in Chrome Blink and fails in the same way, also in Edge.

This is not fixed in Safari WebKit, which is behind the curve.

The site is created by http://diydrones.com/profile/zlitezlite
https://about.me/andersonchris

The good news is that he is on github @zlite
and might help to fix his site.

[karlcow]

@billbonney could you help us find the right person for this issue at @diydrones thanks

[billbonney]

@karlcow diydrones.com is hosted on a platform supplied by ning.com platform. I'd recommend taking with them

[karlcow]

Thanks @billbonney
So if I understand correctly, the platform ning is doing the front-end too.
I wonder if @pierre has still contacts at @ning who could help us.

[karlcow]

This has been fixed.