How to handle Chrome rendering dynamically added elements with incomplete CSS

I am setting class name on A tags (present in original HTML) under which SVG elements are appended as they are being loaded with $.get. The SVG elements have styles that are not applied on Chrome, unless I do something that forces a re-render. For example, checking/unchecking a box for a style attribute in Developer view, or using Brackets IDE and modifying CSS (which causes Brackets to tear our all CSS and replace it for every character typed). When I put the class-adding code on setTimeout, with at least 80ms interval, it works. In IE11, Edge, Safari and Firefox, it works without this work-around. According to Network pane, CSS loads before the scripts (also tried placing them at the tail instead of head) so this is a problem of Chrome not properly managing the render sequence (most likely trying to be too smart with minimal re-render algorithm that works against me). How do I handle this properly? Below is a working version, because I hard-coded the styles normally applied with jQuery (in production I would render this server-side but it's not a satisfying solution): http://www.01binary.us/navigation/index.htm Here's the broken version: http://www.01binary.us/navigation-broken/index.htm You can verify that moving lines 55-64 in navigation.js into a setTimeout will make it work. [Chrome Version 51.0.2704.103 (64-bit) on Mac]