javascript - 缩放时子 div 背景颜色不适合父 div

Question

根据浏览器的缩放级别，子 div 的背景颜色有一种奇怪的行为。出现一些空白。
请参阅以下示例:
放大 125%:

放大 150%:

放大 175%:

放大 200%:

这是我的代码:
(JSFiddle:https://jsfiddle.net/3L4wfvyg/)

$(document).ready(function () {
    document.getElementById("HeaderContainer").addEventListener("click", function (e) {
        if (e.target.id != "FormContainer") {
            document.getElementById("Container3").classList.toggle("clicked");
            document.getElementById("HeaderContainer").classList.toggle("HeaderContainer3");
        };
    });
});

.Container1 {
  background-color: white;
  line-height: 30px;
  font-size: 20px;
  color: black;
  border: none;
  position: absolute;
}

.Container1 h3 {
  font-size: 30px;
  color: #142D41;
  margin-top: 20px;
  margin-bottom: 10px;
  position: relative;
}

.Container1 .Container3 {
  padding: 30px;
  display: block;
  border: 1px solid black;
  border-radius: 5px;
  margin-top: 15px;
  font-size: 15px;
  min-width: 100%;
  background-color: white;
  text-align: left;
  height: 100px;      
  overflow: hidden;
}
.Container1 .Container3:hover {
  text-decoration: none !important;
  cursor: pointer;
}            

.HeaderContainer3:hover {
  color: white !important;
  background-color: blue;
}

.HeaderContainer2 {
  padding: 30px;
}

.HeaderContainer1 {
  z-index: 10;
  position: relative;
  margin: -31px;
  padding: 32px 30px 25px 30px;
  width: auto;
}

.FormContainer {
  font-size: 20px !important;
}

#Container3 {
  height: 0px;
  transition: height 300ms ease-in-out;
  box-shadow: 0.1px 0.6px 2px 0px #8c8c8c;
}

#Container3.clicked {
  height: 314px;
}

.Header {
  position: relative;
  padding-top: 6px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  cursor: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="Container1" class="Container1">
  <h3>Title
  </h3>
  <div class="Container2">

    <div id="Container3" class="Container3">
      <div id="HeaderContainer" class="HeaderContainer1 HeaderContainer2 HeaderContainer3">
        <div class="Header">Header</div>
      </div>
      <div id="FormContainer" class="FormContainer">
        <hr />
        <div style="padding: 5px 0px 8px 0px;">
          Form
        </div>
        <br />
        <div id="FormElementsContainer" class="FormElementsContainer">
          <div>
            <b>First</b>
            <br />
          </div>
          <div>
            <b>Last</b>
            <br />
          </div>
          <div>
            <b>Third</b>
            <br />
          </div>
          <div>
            <br />
            <button>
              Submit
            </button>
          </div>
        </div>
        <br />
      </div>
    </div>
  </div>
</div>

为什么会发生这种情况，我该如何解决这个问题？
当我从 Container3 中删除边框时，似乎问题不再发生，但我不知道这是否是因为由于白色而很难看出问题是否仍然存在。

Answer 1

在高清/现代屏幕上，一个 CSS 像素不仅仅是一个屏幕像素，而是 2 个或更多像素，可能会对缩放产生一种边缘效果。如果系统试图将几个屏幕像素映射到一个 CSS 像素，并被要求做一小部分，它有时会“留下”一个屏幕像素。因此有时会出现白色，以及不同缩放级别的变化。
在问题的情况下，可能做一个简单的黑客攻击，使父元素在悬停时具有蓝色背景，就足够了吗？

.Container1 .Container3:hover {
  text-decoration: none !important;
  cursor: pointer;
  background-color: blue;
  
}