在Firefox中缩放div时如何解决边界不一致的问题

Question

我有几个包含相似布局的简单网页。所有这些页面都嵌入到iframe中更大的产品中，以保持独立性。由于可以以任何方式调整iframe的大小并进行扩展，可以全屏显示等等，因此页面应该适应它。选择的解决方案是重新缩放整个内容，因为它极大地简化了创建过程（并且媒体查询无法工作）。

但是我注意到在Firefox（v68 x64）上进行测试时出现问题。当我缩小带有边框的div时，边框有时会不一致地缩放。 div的不同侧面将显示或不显示任何边框。结果是可怕的，我注意到其他浏览器（甚至不是IE11：D）都不会发生这种情况。

我准备了一些jsfiddle来演示会发生什么：jsfiddle

.container {
  width: 400px;
  height: 400px;
  background: black;
  transform-origin: 0 0;
  padding-top: 30px;
  transform: scale(0.4);
}

.btn {
  border: 2px solid white;
  margin: 20px 30px;
  height: 50px;
  color: white;
  line-height: 50px;
  padding-left: 20px;
}

<div class="container">
  <div class="btn">Btn 1</div>
  <div class="btn">Btn 2</div>
  <div class="btn">Btn 3</div>
</div>

当我缩小包含其他带边框的div的div时，会发生这种情况。在此示例中，第二个按钮似乎没有顶部边框。

我显然不希望所有页面都无限缩小，并且看起来仍然不错，只是边框不会消失。在其他浏览器中，它的效果要好得多。有谁知道如何解决/改善这个问题？我无法更改基本条件（缩放要求，嵌入页面），但是可以完全访问页面本身，并且可以更改它。

让我知道您是否需要更多详细信息（例如屏幕详细信息，默认页面分辨率等）。

注意：建议的重复项与该问题无关，而问题“看起来很相似”，快速阅读将表明所涉及的浏览器有所不同，问题的基础是完全相同的有所不同，而且进一步，所有解决方案均无效。