javascript - Chrome Bug with Knockout? -

i have developed tree view uses knockout display hierarchy. have noticed weird situation within chrome happens when collapse node in tree. text node disappears along items under it. figured had wrong code , figured out works correctly in both ie , firefox. created fiddle below demonstrates issue code page stripped out. if expand node , collapse (the plus button not change minus in full code), text disappears. then, can click anywhere on page text show up.

the text disappears has been outlined in red recommended in comment , can seen in screenshot

i have tested out on 4 machines , on each 1 doesn't work when use chrome. bug in chrome, or doing wrong? also, can see way work around issue if bug in chrome?

example fiddle

console.clear();    var hierarchynode = function (parent) {      var self = this;      this.name = "node name";      this.haschildren = ko.observable(true);      this.childnodes = ko.observablearray();      this.expanded = ko.observable(false);  };    hierarchynode.prototype = {      name: null,      haschildren: null,      childnodes: null,      getchildnodes: function (element, event) {          if (element.haschildren() === true && element.childnodes().length === 0) {              element.childnodes.push(new hierarchynode(element));          }            element.expanded(!element.expanded());        }      };    var hierarchyvm = function () {      var self = this;        self.hierarchynodes = ko.observablearray();      self.selectitem = function () {};  };    var vm = new hierarchyvm();    vm.hierarchynodes.push(new hierarchynode(null));    console.log(vm.hierarchynodes()[0]);  ko.applybindings(vm);

ul.tree {      list-style-type: none;      padding-left: 10px;  }  .hierarchynode {border: 1px solid red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <ul class="tree" data-bind="template: { name: 'itemtmpl', foreach: $data.hierarchynodes }"></ul>  <script id="itemtmpl" type="text/html">                  <li>                      <button data-bind="click: getchildnodes">+</button>                                      <div data-bind="visible: haschildren() == false" class="tree-spacer"></div>                      <span data-bind="text: name" class="no_selection hierarchynode"></span>                      <ul class="tree" data-bind="template: { name: 'itemtmpl', foreach: $data.childnodes }, visible: expanded"></ul>                  </li>              </script>

i able fix changing visible binding use if parameter on template instead. don't know why fix it, there go.

<ul data-bind="template: { name: 'itemtmpl', foreach: childnodes, 'if': expanded }"></ul> 

fiddle

this seem chrome specific bug because markup not being changed name element. clicking anywhere after collapsing makes appear. bug in renderer perhaps?