It's baffling to me. This issue only arises with larger resolutions. The question on my mind is how can I prevent this from occurring.
For example, take a look at:
https://jsfiddle.net/eddietal2/qgLvsx2v/
CSS:
.svg-wrapper {
width: 300px;
height: 400px;
background-color: white;
margin: 25px 25px 120px 25px;
display: inline-block;
position: relative;
z-index: -99;
}
In the HTML:
<div class="svg-wrapper">
<h1>Hello</h1> // The element causing all issues.
<div class="caption">
<h2>Day 1</h2>
</div>
</div>