放大页面会破坏Firefox中的布局，但不会破坏Chrome中的布局

问题描述

我制作的网页在未缩放的情况下在Chrome和Firefox中可以正常工作，但是，缩放会破坏Firefox中的布局（但由于某些原因，在Chrome中不行）。您可以看到live version。
这是Firefox中的外观：

但是，放大时，它看起来像这样：

这是该网页的CSS代码：

body {
  font-family: sans-serif;
}

#format_as_code {
  font-family: "Lucida Console",monospace;
  font-size: 12px;
  white-space: pre;
  width: calc(80 * 7.2px);
  background: #111111;
  color: #eeeeee;
  height: calc(24 * 14.5px);
  display: block;
}

h1 {
  text-align: center;
}

#center {
  margin-left: auto;
  margin-right: auto;
  width: calc(80 * 7.2px);
}

知道我在做什么错吗？

解决方法

只要我能说出即使在Firefox中放大也不会破坏布局（请参见下面的屏幕截图）。也许您可能想从<span id = "format_as_code">删除宽度或将其设置为auto以查看是否有任何变化。
关于性能的快速提示：我已经注意到，所有跨度（我认为代表着画布的像素）每隔一秒都会更新，甚至根本没有变化！
这会导致性能显着下降，因此可能需要调查一下。
我将附上一个屏幕截图，显示我如何查看该网站以及它如何在FF 79 64bit上呈现。
希望这对您有所帮助！