title: Why do MatterJS physics coordinates have offset with DOM elements?
body: <p>I'm running a MatterJS physics simulation by adding boxes to the physics engine, and at the same time creating a DOM element with the same dimensions.</p>
  <p>Then, I'm looping through the physics boxes to get their coordinates. I then use those coordinates to position the corresponding DOM element. This seems to work correctly, except that my static &quot;ground&quot; box seems to have a 10 pixel invisible radius around it?</p>
  <p>My boxes are 40x40 pixels. The ground is at 400 pixels. The boxes stop falling at 350 pixels. So why the 10 pixels discrepancy?</p>
  <p><a href="https://codepen.io/eerk/pen/QWpGOxr?editors=0010" rel="nofollow noreferrer">Here is an example of the issue in CodePen</a></p>
  <p>EDIT: if I render the same boxes in a canvas, the discrepancy isn't there. <a href="https://codepen.io/eerk/pen/xxqRpBL?editors=0010" rel="nofollow noreferrer">Codepen Canvas</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Box {
    constructor(world, x, y, w, h, options) {
      // add box to physics simulation
      this.physicsBox = Matter.Bodies.rectangle(x, y, w, h, options);
      Matter.Composite.add(world, this.physicsBox);
  
      // add DOM box at the same coordinates
      this.div = document.createElement("box");
      document.body.appendChild(this.div);
      this.div.style.width = w + "px";
      this.div.style.height = h + "px";
      this.update();
    }
  
    update() {
      let pos = this.physicsBox.position;
      let angle = this.physicsBox.angle;
      let degrees = angle * (180 / Math.PI);
      this.div.style.transform = `translate(${pos.x}px, ${pos.y}px) rotate(${degrees}deg)`;
    }
  }
  
  let engine;
  let boxes = [];
  
  setupMatter();
  addObjects();
  gameLoop();
  
  function setupMatter() {
    engine = Matter.Engine.create();
  }
  
  function addObjects() {
    boxes.push(
      new Box(engine.world, 250, 20, 40, 40),
      new Box(engine.world, 300, 350, 40, 40),
      new Box(engine.world, 320, 70, 40, 40),
      new Box(engine.world, 0, 400, 800, 60, { isStatic: true })
    );
  }
  
  function gameLoop() {
    // update the physics world
    Matter.Engine.update(engine, 1000 / 60);
    // update the DOM world
    for (let b of boxes) {
      b.update();
    }
    requestAnimationFrame(() =&gt; this.gameLoop());
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    background-color: #4b4b4b;
    color: white;
    margin: 0px;
    padding: 0px;
  }
  
  box {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    position: absolute;
    display: block;
    background-color: rgba(45, 188, 232, 0.687);
    transform-origin: 20px 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>