UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36

Example URL:
http://www.01binary.us/navigation-broken/about.htm

Steps to reproduce the problem:
1. Create static HTML page with one or more <a> links having href and inner text

2. Create a CSS file, reference in HTML head, and create two styles that will apply to children of <a> elements that have specific class names, only applying to <a> elements that themselves have a specific class name. For example "button-part1" and "button-part2" for children of <a> and "button-selected"/"button-unselected" for <a>. For demo purposes, have them modify "fill" to "red" and "green".

Thus:

/* colors SVGs red if under A that has "button-selected" class and SVGs have "button-part1" or "button-part2" class */
.button-selected .button-part1,
.button-selected .button-part2
{
    fill: red;
}

/* colors SVGs green if under A that has "button-unselected" class and SVGs have "button-part1" or "button-part2" class */
.button-unselected .button-part1,
.button-unselected .button-part2
{
    fill: green;
}

3. Create a JS file, reference in HTML head below CSS (this issue reproduces if inserted at end of body as well).

4. Load SVG with one or more <g> graphic defined under <defs> to be used as "icon set". Use jQuery AJAX ($.get) and prepend this SVG to body when the promise is done. Set display:none style directly on SVG element to prevent the graphic set SVG from taking visible space.

3. For each <a> in document, prepend to <a> with jQuery:

<svg class="button-part1"><use xlink:href="#part1"></use></svg>
<svg class="button-part2"><use xlink:href="#part2"></use></svg>

This adds dynamic inline SVG under each A referencing the main icon set prepended to body earlier

4. In the same for-each loop as above, or when the loop is done, pick one of the <a> elements with jQuery and apply "button-selected" class.
5. Apply "button-unselected" class the same way to all <a> elements other than the one chosen in step 4

6. Observe random styling behavior. Most often "button-unselected" is applied to all <a> elements, despite Developer Tools reporting that one of them has "button-selected" class. Sometimes the reverse happens and they all get "button-selected". Other times the style seems to be applied randomly.

7. Check and uncheck the "fill" attribute in either "button-selected" or "button-unselected" using Developer Tools. Toggling the application of CSS property twice should return to the same state. Instead observe that CSS is refreshed on the entire page and correct styles are now applied.

8. Observe that sometimes pressing the mouse down on one of the <a> elements (often 2nd or 3rd time) without letting it up to cause navigation, also re-renders elements and applies the correct CSS.

9. Stop applying <a> class names with jQuery and hard-code in HTML directly. Observe the behavior stops, and proper styles are applied when page reloads. Reloading page and navigating does not break this. This is the best way to word around the issue.

10. Once again apply <a> class names with jQuery and remove class names for <a> hard-coded in HTML. This time apply <a> class names using setTimeout, with a large value like 1000. Observe that the page renders incorrect CSS on load, then re-renders to correct CSS after timeout elapses. Progressively step down timeout values to observe that 0-70ms range causes random behavior (sometimes re-renders correctly, sometimes not).

11. Observe that this behavior does not occur on IE11, IE10, IE Mobile, Safari, and Firefox, all with latest versions matching Chrome version.

What is the expected behavior?
When applying class name to an element, page should re-render its children with updated styles, since it's possible to specify CSS that says "apply this style only if this element has class X and parent has class Y". Problem reproduces only if the children in question were created dynamically with jQuery.

What went wrong?
Browser did not re-render sub-tree of element(s) that had class property updated with the correct styles, if the sub-tree was dynamically created.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes 

Chrome version: 51.0.2704.103  Channel: stable
OS Version: OS X 10.10.5
Flash Version: Shockwave Flash 22.0 r0