Knockoutjs: some observables binding but not visible in Safari

Question

I have a Knockout view-model which is displayed correctly in all browsers on Windows and Mac... except Safari on the Mac.

Here is the HTML with the data-binding attributes:

<div data-bind="visible: !Loading(), with: SelectedAddress">
    <!-- ko if: Comment().length -->
        <span data-bind="text: Comment"></span><br/>
    <!-- /ko -->
    <!-- ko if: Company().length -->
        <span data-bind="text: Company"></span><br/>
    <!-- /ko -->
    <!-- ko if: Name().length -->
        <span data-bind="text: Name"></span><br/>
    <!-- /ko -->
    <!-- ko if: Address1().length -->
        <span data-bind="text: Address1"></span><br/>
    <!-- /ko -->
    <!-- ko if: Address2().length -->
        <span data-bind="text: Address2"></span><br/>
    <!-- /ko -->
    <!-- ko if: ZipAndCity().length -->
        <span data-bind="text: ZipAndCity"></span><br/>
    <!-- /ko -->
    <!-- ko if: CountryName().length -->
        <span data-bind="text: CountryName"></span><br/>
    <!-- /ko -->
</div>

The strange problem is that the first two bound fields, for Comment and Company , do not show their text on Safari. However, there are spaces for them - you can see that there shouldn't be a line break if there is no content in the field, and the line breaks for both those fields are showing up.

Furthermore, Safari's Developer Tools reveals that the DOM elements have been populated with the expected text.

And even more: if you click and highlight the text, then it becomes visible. The same is true if Safari is dragged to another screen. In other words, if Safari has to re-paint then the text is rendered, but when the Knockout binding is applied, although the text is added to the DOM element, it is not rendered.

I have also tried using virtual elements / containerless binding like so

<!-- ko if: Comment().length -->
    <!-- ko text: Comment --><!-- /ko --><br/>
<!-- /ko -->

but this has no effect on the outcome.

I tried putting together a jsfiddle example, but it worked. So this might have something to do with the interplay of all the observables on the page, or the nesting of the view-models, etc .

Can anyone suggest what might be wrong, or any workarounds?

UPDATE:

The problem appears to have been related to the visible: !Loading() binding on the parent <div> .

If I remove this then the problem goes away.

I know that this doesn't exactly solve the problem, but for me it removes the problem as that particular binding was no longer needed anyway.

I also found that if I moved those two problematic fields, Comment and Company , to the end of the list then the next two fields, Name and Address1 , inherited the problem. However, if I removed two fields then the problem went away.

Answer 1

Looks like a browser issue on re-flow the inner content.

Could you try this to force knockout to regenerate the whole DOM when loading finished?

<!-- ko ifnot: Loading -->
    <div data-bind="with: SelectedAddress">
        <!-- ko if: Comment().length -->
            <span data-bind="text: Comment"></span><br/>
        <!-- /ko -->
        <!-- ko if: Company().length -->
            <span data-bind="text: Company"></span><br/>
        <!-- /ko -->
        <!-- ko if: Name().length -->
            <span data-bind="text: Name"></span><br/>
        <!-- /ko -->
        <!-- ko if: Address1().length -->
            <span data-bind="text: Address1"></span><br/>
        <!-- /ko -->
        <!-- ko if: Address2().length -->
            <span data-bind="text: Address2"></span><br/>
        <!-- /ko -->
        <!-- ko if: ZipAndCity().length -->
            <span data-bind="text: ZipAndCity"></span><br/>
        <!-- /ko -->
        <!-- ko if: CountryName().length -->
            <span data-bind="text: CountryName"></span><br/>
        <!-- /ko -->
    </div>
<!-- /ko -->