Chrome DOM not updating for jQuery append/fadeIn

Question

After fetching a new record from the server, I use the AJAX success callback from jQuery 1.7.2 to add a new record to the list and fade it in.

function onSuccess (data, status, xhr) {
    var record = $(template_html);

    // populate `record` with `data` values.

    body.append(record); // body is a jQuery object from closure scope
    record.fadeIn('fast');
}

I tested this in the following browsers:

• IE 8
• IE 9
• Safari 5.1.7
• Firefox 14.0.1
• Chrome 21.0.1180.79
• Opera 11.64

It works in all of the above browsers consistently, except for Chrome. It works occasionally in Chrome.

When it fails in Chrome, if I click "Inspect Element" or view the Elements tab on the Developer Tools, or click on the DOM element that is printed to the Javascript Console using console.log(record), it causes the new record to pop into visibility.

I know that the DOM element is being created, populated, and appended correctly. The problem is that sometimes Chrome refuses to re-render the DOM. Sometimes.

I've tried replacing fadeIn with show or fadeTo with no change.

None of the answers in "Similar Questions" have worked for me. The markup for the record is just <div>s in <div>s, and I validated the page before and after adding new records to see if invalid HTML might be the issue.

Any thoughts or ideas?

Answer 1

try this:

$(document).ready(function () {
    var body = document.body;
    $(body).append(function () {
        return $('<div>').addClass('Appended').html('Test Div </br> :)');
    });

    setTimeout(function () {
        $('.Appended').fadeIn('fast');

        // i'm used timeout to see the effect
    }, 1500);
});

you can check it by this fiddle link