Two separate div elements each contain an identical SVG graphic.
If I hide the first div by setting it to "display: none", the SVG in the second div appears as a gray box.
This issue is present in both Firefox and Chrome browsers.
Any insights into why this is happening and possible workarounds?
Sample code provided below:
P.S. The SVG was provided by our designer for use in the project.
(EDIT: Using Chrome Version 64.0.3282.167 and Firefox 45.9.0. In the actual project, the SVG is imported as a React Component, so any modifications would affect both instances)
$("#button").click(function(){
$("#firstDiv").css("display","none");
})
$("#button2").click(function(){
$("#firstDiv").css("display","inherit");
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<button id="button">Hide First Div</button>
<button id="button2">Show First Div</button>
<div id="firstDiv">
<?xml version="1.0" encoding="utf-8"?>
<svg height="100" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0{filter:url(#Adobe_OpacityMaskFilter);}
.st1{fill:#FFFFFF;}
.st2{mask:url(#mask-2_1_);}
.st3{fill:#666666;}
</style>
<title>Icon/Close Copy</title>
<desc>Created with Sketch.</desc>
<g id="Cross" transform="translate(-1397.000000, -1518.000000)">
<g id="Group-44" transform="translate(0.000000, 1495.000000)">
... (SVG content omitted for brevity) ...
</svg>
</div>
<div>
<svg height="100" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0{filter:url(#Adobe_OpacityMaskFilter);}
.st1{fill:#FFFFFF;}
.st2{mask:url(#mask-2_1_);}
.st3{fill:#666666;}
</style>
<title>Icon/Close Copy</title>
<desc>Created with Sketch.</desc>
<g id="Cross" transform="translate(-1397.000000, -1518.000000)">
<g id="Group-44" transform="translate(0.000000, 1495.000000)">
... (SVG content omitted for brevity) ...
</svg>
</div>