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

Question

Depending on the zoom-level of the browser, the background color of the child div has a strange behavior. Some white spaces appears.

See these examples:

Zoom 125%:

Zoom 150%:

Zoom 175%:

Zoom 200%:

Here is my code:

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

Why is this happening and how can I solve the problem?

When i remove the border from Container3 it seems like the problem does not occur anymore, but I do not know if this is because it gets hard to see if the problem is still there due to the white color.

Answer 1

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

Answer 2

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>