Safari creates two nodes for large text with ember

I'm trying to figured out why Safari creates two nodes to render a large text using ember binds. This way ellipses doesn't work (that's my problem). The first node always have 10000 characters, the second one contains the remaining characters.

Simple code as example:

html:

<script type="text/x-handlebars">
    
</script>
<script type="text/x-handlebars" data-template-name="index">
    <span>
        
    </span>
</script>

css:

span {
    border: 1px solid;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-warap: break-word;
    overflow: hidden;
    width: 250px;
    display: inline-block;
}

route:

App = Ember.Application.create();
App.Router.map(function () {});

App.IndexRoute = Ember.Route.extend({
    model: function () {
        var longText = 'Lorem ipsum dolor sit amet...';
        return longText;
    }
});

Fiddle with the code: Fiddle

p.s. Safari version: 9.0. Chrome works fine.