SVG Table "Collapse" on Retina vs. Non-retina Screens - html

Question

I'm using data to render SVG-based tables and charts in the browser (using Snap.js). All appears fine on a non-retina screen, but when I move the browser window containing the table to a retina screen, the table moves outside of the parent container.
From what I can tell, this has to do with the display itself and how the browser communicates with it, not the CSS (I've tried using different position values for parent and child, to no avail…and it already works fine on non-retina).
Non-retina:
Table appears normal
Retina:
Table outside parent container
Sample SVG Markup:
<svg class="pond" width="800px" height="100%"><desc>Created with Snap</desc><defs></defs><g class="pond-container"><rect x="0" y="0" width="800px" height="100%" fill="#ffffff" stroke="rgba(0,0,0,0)" style="stroke-width: 0;" class="pond-container "></rect>
<g id="pond_widget_250" class="widget-translator widget-droppable" transform="matrix(1,0,0,1,478,330)"><g stroke="none" fill="rgba(0,0,0,0)" style="stroke-width: 0;" class="pond-widget widget-container pond-widget-group "><rect x="0" y="0" width="302" height="49" rx="0" ry="0" class="pond-widget pond-widget-rect "></rect></g><g id="pond_widget_251" class="widget-translator widget-droppable" transform="matrix(1,0,0,1,4,4)"><g stroke="#008eda" fill="#dbeffa" style="stroke-width: 1;" class="widget-container customized"><rect x="0" y="0" width="294" height="41" rx="0" ry="0" stroke="#008eda" fill="#dbeffa" style="stroke-width: 1px; stroke-dasharray: none;" class="pond-widget pond-widget-rect "></rect></g></g><g id="pond_widget_252" class="widget-translator " transform="matrix(1,0,0,1,70,20.0001)"><g stroke="#008eda" fill="#dbeffa" style="stroke-width: 1;" class="widget-container customized"><text x="0" y="0" stroke="none" fill="#008eda" style="stroke-width: 1px; stroke-dasharray: none; font-size: 14px; font-weight: 900; alignment-baseline: hanging; text-anchor: start;" class="pond-widget pond-widget-text ">Table Should Appear Below</text></g></g></g><g id="pond_widget_256" class="widget-translator " transform="matrix(1,0,0,1,481,403)"><g stroke="null" fill="rgba(0,0,0,0)" style="stroke-width: 1;" class="widget-container customized" id="table_255"><rect x="0" y="0" width="295" height="352.0000305175781" rx="0" ry="0" stroke="null" fill="rgba(0,0,0,0)" style="stroke-width: 1px; stroke-dasharray: none;" class="pond-widget pond-widget-rect "></rect>
<foreignObject width="295px" height="352.0000305175781px" style="
position: relative !important;
">
<div class="rt--view rt-table-view" xmlns="http://www.w3.org/1999/xhtml" style="left: 0;bottom: 0;" contentscalefactor="1.0">
<div class="grid-header" style="
float: none;
">
<span class="col col-0 equip_name cols-2">
<span>Equip Name</span>
</span>
<span class="col col-1 value cols-2">
<span>Value</span>
</span>
<!-- end for -->
</div>
<div class="grid-body" style="
float: none;
">
<div class="grid-row row-0">
<span class="col col-0 equip_name cols-2">
AC-03 2nd Flr South
</span>
<span class="col col-0 value cols-2">
37500
</span>
</div>
<div class="grid-row row-1">
<span class="col col-1 equip_name cols-2">
AC-06 Dining
</span>
<span class="col col-1 value cols-2">
31200
</span>
</div>
<div class="grid-row row-0">
<span class="col col-2 equip_name cols-2">
AC-01 1st Flr South
</span>
<span class="col col-2 value cols-2">
38700
</span>
</div>
<div class="grid-row row-1">
<span class="col col-3 equip_name cols-2">
AC-05 Tailor Shop
</span>
<span class="col col-3 value cols-2">
41100
</span>
</div>
<div class="grid-row row-0">
<span class="col col-4 equip_name cols-2">
AC-04 2nd Flr North
</span>
<span class="col col-4 value cols-2">
39600
</span>
</div>
<div class="grid-row row-1">
<span class="col col-5 equip_name cols-2">
AC-07 Kitchen
</span>
<span class="col col-5 value cols-2">
56100
</span>
</div>
<div class="grid-row row-0">
<span class="col col-6 equip_name cols-2">
AC-02 1st Flr North
</span>
<span class="col col-6 value cols-2">
39000
</span>
</div>
<div class="grid-row row-1">
<span class="col col-7 equip_name cols-2">
AC-08 MC Room
</span>
<span class="col col-7 value cols-2">
85500
</span>
</div>
<!-- hidden rows -->
<div class="hidden-rows-count">32 more row(s) hidden</div>
<!-- end if hidden -->
</div>
<!-- end if data.length -->
</div>
</foreignObject>
</g></g></g></svg>