JavaScript Toggle Checkboxes breaks if you select in certain order (Mind Blowing!)

Question

Obviously checkboxes can be selected in whatever order you want but I'm having issues with this breaking. I cannot get checkbox C to appear when I select in the following order: A-D-C or D-A-C. If you select in order or reverse order it works fine AND it always works in Firefox for some reason. You can view this anomaly Click here for weird fiddle.

Why is this? How can I work around it?

HTML

<input type="checkbox" id="Abox" data-info-id="infoa">
<label for="Abox"> Checkbox A</label><BR>

<input type="checkbox" id="Bbox"  data-info-id="infob">
<label for="Bbox"> Checkbox B</label><BR>

<input type="checkbox" id="Cbox"  data-info-id="infoc">
<label for="Cbox"> Checkbox C</label><BR>

<input type="checkbox" id="Dbox" data-info-id="infod">
<label for="Dbox"> Checkbox D</label><BR>

 CHECK AN ITEM ABOVE IT SHOULD APPEAR BELOW<P>
 <div style="background-color:silver;">

 <div id="infoa">
 <input type="checkbox" id="kwd2"  >
 <label for="kwd2"> ALPHA</label><BR>
 </div>

 <div id="infob">
 <input type="checkbox" id="fff1">
 <label for="fff1"> BETA</label><BR>
 </div>

 <div id="infoc">
 <input type="checkbox" id="zzz3">
 <label for="zzz3"> CHARLIE</label><BR>
 </div>

  <div id="infod">
  <input type="checkbox" id="kwd5"  >
  <label for="kwd5"> DELTA</label><BR>
  </div>

  </div>

JAVASCRIPT

  document.addEventListener('change', function(e) {
  var id = e.target.getAttribute('data-info-id');
  var checked = e.target.checked;

  if (id) {
      var div = document.getElementById(id);
      if (div) div.style.display = checked ? 'inline' : 'none';
      alert("bang");
    }

  });

CSS

[id^="info"] {
display: none;
}

Answer 1

It looks like a Webkit (doesn't work in Safari or Chrome) bug displaying the inline divs. C's block is "displayed," it just has 0 width and height. I'm not certain what the spec says about inline divs, but they're not conventional. If you use block instead of inline it works.

(Edit deleted, it was wrong.)

Edit: this appears to be a simple browser redraw bug. You can make the inner part

<span id="infoa">ALPHA<br></span><span id="infob"></span><span id="infoc">CHARLIE</span><span id="infod">DELTA</span>

and it fails the same way. The newline before the non-displayed #infob appears to trigger #infoc's display problem. Seems like this should be reported to the Webkit people.

Answer 2

Weird bug, seems to have something to do with having inline -> block -> inline divs.

Changing the display to "block" instead of "inline" will do the trick though.

if (div) div.style.display = checked ? 'block' : 'none';