General sibling combinator bug

Blink general sibling combinator bug on DOM changes

by rdvornov

HTML

<div id="demo">
    <div class="ref">reference node</div>
    <div>foo <span class="comment">(should be green)</span></div>
    <div>bar <span class="comment">(should be green)</span></div>
    <div>baz <span class="comment">(should be green)</span></div>
</div>
<button onclick="$('#demo').toggleClass('selected')">click me</button>
<button onclick="fix()">workaround :-/</button>

CSS

#demo > div
{
    margin: 1px;
    padding: 5px;
    background: #EEE;
}
#demo.selected .ref ~ *
{
    background: #AAFFAA;
}

/* just uncomment it, and previous selector starts work! o_0 */
/*
.selected ~ wtf { }
/**/

/*
  testing stuff (ignore it)
*/
.comment
{
    color: #888;
    display: none;
}
.selected .comment
{
    display: inline;
}

JavaScript

// one of possible workarounds:
//   remove block from document and return it back
window.fix = function(){
    var tmp = document.createComment('');
    var el = document.getElementById('demo');
    var parent = el.parentNode;
    parent.replaceChild(tmp, el);
    parent.replaceChild(el, tmp);
}