Knockoutjs：一些observables绑定，但在Safari中不可见

Question

我有一个Knockout视图模型，可以在Windows和Mac上的所有浏览器中正确显示......除了Mac上的Safari。

下面是数据绑定属性的HTML：

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

奇怪的问题是，前两个绑定字段，为Comment和Company，并不显示在Safari上的文字。然而，他们有空间 - 你可以看到，如果该字段中没有内容，则不应该有换行符，并且的这两个字段的换行符都显示出来。

此外，Safari的开发工具显示，DOM元素已有填充了预期的文本。

甚至更​​多：如果您单击并突出显示文本，则它变得可见。如果将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 -->