Knockoutjs: some observable bindings but not visible in Safari

Question

I have a knockout presentation model that displays correctly in all browsers on Windows and Mac ... except Safari on Mac.

Here is the HTML with 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 related fields for Commentand Companydo not display their text in Safari. However, there are spaces for them - you can see that there should not be a line break if the field has no content and the line breaks for both of these fields.

In addition, Safari Developer Tools shows that DOM elements were filled with the expected text.

: , . , Safari . , Safari , , Knockout, DOM, .

/ , ,

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

.

jsfiddle, . , - ..

- , , - ?

UPDATE:

, , visible: !Loading() <div>.

, .

, , , .

, , Comment Company, , Name Address1 . , , .

Answer 1

.

, DOM ?

<!-- 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 -->