Таблица SVG «Свернуть» на экранах Retina и без Retina

Я использую данные для отображения таблиц и диаграмм на основе SVG в браузере (используя Snap.js). Все выглядит нормально на экране без сетчатки, но когда я перемещаю окно браузера, содержащее таблицу, на экран сетчатки, таблица перемещается за пределы родительского контейнера.

Из того, что я могу сказать, это связано с самим дисплеем и тем, как браузер взаимодействует с ним, нет CSS (я пытался использовать разные значения позиции для родительского и дочернего элементов, но безрезультатно… и он уже отлично работает на других устройствах). -сетчатка).

Без сетчатки:Таблица выглядит нормально

Сетчатка:Таблица вне родительского контейнера

Пример SVG-разметки:

<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>