Span element not updating correctly

Question

Update 3 - 10/09/2013: Just tested this with Version 29.0.1547.66 m and the problem still persists. If anyone else can test this out and let me know the results that would be great. You need an inline element such as a span with some text in, have it relatively positioned and moved by however many pixels you want from left and top. Then set up some jScript to change the current inner html of the element to something else and you should see it remain the same in the viewport but change correctly in the DOM.

Update 2: After a bit more testing the problem seems to occur on elements that are inline such as span, or have CSS that makes them inline, but that are also relatively positioned, it seems to be this combination that is causing the issue. After posting the bug on Chromium it has been flagged as a cr-Blink-Rendering issue which looks to be the engine that renders the DOM in the broswer viewport. I am using Version 29.0.1547.57 (the current version ends .66 but mine has not updated due to an error). So if you're on the latest version this issue may no longer be there.

Update: On further investigation I think the problem is with the latest Chrome build Version 29.0.1547.57 m As I tested the element in an inline fashion in IE9 and Firefox 21 and it worked fine. I have filed a bug report for this on chromium

I'm having a problem (that I have not been able to recreate with jsfiddle) where I perform an ajax request, obtain some values and place them within span elements that exist within my page.

I have a very odd problem where the ajax request is working and bringing the values back. The values are being inserted into the span elements via jQuerys .html' method and when I check the DOM using Chrome developer tools I can see the new value in the span.

However, what I see on the page doesn't reflect this, it still shows the old value. Yet if I attempt to highlight the value, it instantly changes to the correct value (the value that is showing in the DOM).

I have even tried to update the spans value before the ajax call (as the value I am using is being obtained from jQuery UI's slider widget) but this still yields the same results.

Has anyone else come across this?

EDIT: Here is some of the code

HTML

<div id="NewLoanSliderAmount" class="NewLoanSliderRules"></div>
<span id="NewLoanSliderAmountDisplay" class="NewLoanDisplay">£600</span>

The slider code. This is the version where I attempt to update it directly from the slider value

$("#NewLoanSliderAmount").slider({
    value: amount,
    min: 300,
    max: amount,
    step: 100,
    change: function (event, ui) {
        $("#NewLoanSliderAmountDisplay").html("£" + ui.value);
        window.CkSpace.GetLoanValues();
    }
});

Here is the ajax code:

    (function (CkSpace, $, undefined) {
        CkSpace.GetLoanValues = function () {
        var url = "/Home/UpdateAPR";

        $.get(url, { Amount: $("#NewLoanSliderAmount").slider("value"), Length:     $("#NewLoanSliderLength").slider("value") }, function (data) {
            $("#NewLoanAmount").html("£"+data.LoanAdvance);
            $("#NewLoanLength").html(data.LoanTerm);
            $("#NewLoanMonthlyCost").html("£"+data.LoanInstalment);
            $("#NewLoanTotal").html(data.LoanGrossRepyable);
            $("#NewLoanAPR").html(data.LoanAPR+"%");
            $("#NewLoanSliderAmountDisplay").html("£" + data.LoanAdvance);
            });
        }

    } (window.CkSpace = window.CkSpace || {}, jQuery));

EDIT 2:

Another thing to note is that if i set a break point on the span being populated and step through it, it updates perfectly every time in Chrome developer tools

Answer 1

I've figured out what was causing the problem although I don't know WHY it is causing the problem.

First off I tried changing the span to a div and adding display:inline to the css. It still didn't work.

I then removed the inline display and all of a sudden, as a block level element it works.

If anyone knows more about why this is and can elaborate then please do!

EDIT: On further investigation I think the problem is with the latest Chrome build Version 29.0.1547.57 m As I tested the element in an inline fashion in IE9 and Firefox 21 and it worked fine. I think it's time to file a bug report!