hunk.code_window:   const rect = element.getBoundingClientRect();
     let scaleX = 1;
     let scaleY = 1;
     if (isHTMLElement(element) && includeScale) {
       // Fallback to 1 in case both values are `0`
  
hunk.labels: keep keep keep keep add keep
hunk.after_edit:     const offsetHeight = element.offsetHeight;
       const offsetWidth = element.offsetWidth;
       // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
  
hunk.file_path: src/dom-utils/getBoundingClientRect.js
hunk.type: add
file: <!DOCTYPE html> <title>Hide Visual Test</title>
  
  <style>
    @import '/reset.css';
    .scroll {
      overflow: scroll;
      width: 300px;
      height: 300px;
      background-color: grey;
    }
  
    .scroll2 {
      width: 600px;
      height: 600px;
      background-color: darkgrey;
      position: relative;
    }
  
    .scroll3 {
      width: 400px;
      height: 400px;
      background-color: lightgray;
    }
  
    .scroll::before {
      content: 'before';
      display: block;
      height: 300px;
      width: 1px;
    }
  
    .scroll::after {
      content: 'after';
      display: block;
      height: 300px;
      width: 1px;
    }
  
    #reference {
      width: 200px;
      height: 200px;
      background-color: red;
      box-shadow: inset 0 0 0 1px black;
    }
  
    #popper {
      width: 100px;
      height: 100px;
      background-color: rebeccapurple;
      box-shadow: inset 0 0 0 1px black;
    }
  
    #popper[data-popper-escaped] {
      background-color: white;
    }
  
    #popper[data-popper-reference-hidden] {
      opacity: 0.4;
      background-color: yellow;
    }
  
    #arrow {
      width: 20px;
      height: 20px;
      background-color: yellow;
    }
  </style>
  
  <div class="scroll scroll2">
    <div class="scroll scroll3">
      <div class="scroll scroll1">
        <div id="reference">Reference Box</div>
        <div id="popper">Popper Box</div>
      </div>
    </div>
  </div>
  
  <script type="module">
    import { createPopper } from '../../dist/popper.js';
    import hide from '../../dist/modifiers/hide.js';
    const reference = document.querySelector('#reference');
    const popper = document.querySelector('#popper');
  
    window.instance = createPopper(reference, popper, {
      placement: 'right',
      modifiers: [
        hide,
        {
          name: 'offset',
          options: {
            offset: [20, 20],
          },
        },
      ],
    });
  </script>
  