This fiddle https://jsfiddle.net/qcnn13p5/1/ contains a stroked line SVG initially scaled to 0.
Setting the scale to 1 with js does not make it render in Chrome.
Other browsers do (tested in edge, firefox, safari, IE11).
Any insights, workarounds, known bug confirmations are appreciated!
(forcing repaint with solutions such as How can I force WebKit to redraw/repaint to propagate style changes? works but is not ideal in our scenarios as there are many many cases)
The stroked line SVG in question :
$('#line-container').css('transform', 'scale(1)');
$('#line').css('transform', 'scale(1)');<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="line-container" style="transform: scale(0)">
<svg id="line" xmlns="http://www.w3.org/2000/svg" version="1.1" class="staticContent shapesLine fill-transparent border-color8" height="100%" width="100%" preserveAspectRatio="none" viewBox="0 0 100 100">
<g xmlns="http://www.w3.org/2000/svg" vector-effect="non-scaling-stroke">
<line x1="0" y1="50" x2="100" y2="50" stroke="currentColor" stroke-width="3" vector-effect="non-scaling-stroke"/>
<rect x="0" y="30" width="100" height="40" style="fill: none !important; stroke: none !important; pointer-events:all !important" vector-effect="non-scaling-stroke"/>
</g>
</svg>
</div>
