Question

Simplest way to explain what is happening is by example:

Before:

<div id="top">
    <div>Row 1 - Horse</div>
    <div>Row 2 - Pony</div>
</div>

Now I call handlebars to overwrite $(‘#top’) with:

<div>Row 1 - Cat</div>

After:

<div id="top">
    <div>Row 1 - Cat</div>
</div>

BUT
This is what it looks like:

Row 1 - Cat
Row 2 - Pony

Not until i manually highlight Row 2 – Pony or press CTRL+A does the text dissapear. It seems to be some sort of redraw problem within JS and I can’t find anyeone else that has had this problem before.

EDIT code sample

JS

var source   = $("#top_html").html();
var template = Handlebars.compile(source);
$('#top').html(template({
    'load_top':'1',
    data_obj:return_obj
})); 

Handlebars

{{#if load_top}}        
    {{#foreach data_obj}}
        <div>{{name}}</div>
    {{/foreach}}         
{{/if}}

Answer 1

Updating Chrome to 24.0.1312.56m seemed to have fixed the problem.