Child div background-color does not fit parent div when zooming

There can be a sort of edge effect on zoom brought about by one CSS pixel not being just one screen pixel but 2 or more on high def/modern screens. If the system is trying to map several screen pixels to one CSS one and is asked to do a fraction it can sometimes 'leave behind' a screen pixel. Hence the white on occasion, and the variation at different zoom levels.

In the case in the question maybe doing a simple hack, making the parent element have background blue on hover, would be sufficient?

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

Inspired by A Haworth's answer: coloring the parent element instead is indeed less prone to rendering artifacts when dealing with different zoomlevels/screen densities. You could remove the background from the child element, and add a new :hover selector for the parent that only activates when it is not in the .clicked state.

.HeaderContainer3:hover {
  color: white !important;
  /** Background removed here **/
}

/** New block with a :not selector **/
.Container1 .Container3:hover:not(.clicked) {
  background-color: blue;
}   

Full working code example:

$(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;
}

.Container1 .Container3:hover:not(.clicked) {
  background-color: blue;
}       

.HeaderContainer3:hover {
  color: white !important;
}

.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>

Here's a fix. It's similar to what someone else suggested, but takes into account the .clicked state.

Fix boils down to setting the background-color property on the container with border and border-radius properties instead of on the nested container. It achieves this by replacing .HeaderContainer3:hover selector with .Container3:not(.clicked):hover.

.Container3:not(.clicked):hover {
  color: white !important;
  background-color: blue;
}

Working fiddle: https://jsfiddle.net/2eqLb6go/

As for why this happens, I don't have a technical answer, but it does appear to have something to do with fractional pixel rendering with nested containers when parent has a border. Here's a demonstration of the same problem in a simplified form:

https://jsfiddle.net/0vje6k5w/

It seems like a rendering issue due to a rounding error with border. It appears that the clipping area and the border widths are calculated differently resulting in an inconsistent gap of transparent pixels which can be rounded to either 0 or 1. The background of the container with the border property is respected (hence the above-described fix), but anything nested inside of it will be clipped, and there doesn't appear to be any way to stop that from happening. E.g. the problem persists even if the child elements are absolutely positioned inside of it.

Honestly, I'd call this a buggy implementation of the box-model with regard to page zoom. It's odd that all major browsers in 2021 suffer from the same behavior.

I changed border size to 0.0125em. (It's weird but worked!).

.Container1 .Container3 {                                           
   border: 0.0125em solid black;                                          
 }