Parent Bg Shows/ Child Doesn't Fill 100% Depending On Zoom Factor

Sometimes the background of my parent-div is showing, and it's driving me crazy. Setup: Container-div with 4x4 divs inside (lets call them 'outer'; blue bg). Each of the blue 'oute

Solution 1:

I found a workaround to achieve my goal by now (which was to not let the blue show through) by just putting another container-div on top of the first one. My original question, though, remains unanswered with that solution. But just in case anyone was trying something similar:

html:

<divid="outer-container"><divid="inner-container"><divclass="inner"></div><divclass="inner"></div><divclass="inner"></div><!-- 16 of those inner-divs here --></div><divclass="bg"></div><divclass="bg"></div><divclass="bg"></div><!-- 16 of those bg-divs here --></div>

css:

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    #outer-container {
        width: 600px;
        position: relative;
        overflow: hidden;
    }

    #inner-container{
        /* width: 600px; */position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
    }

    .bg, .inner{
        width: 150px;
        height: 150px;
        border: 1px solid black;
        float: left;
    }

    .bg{
        background-color: blue;
    }

    .inner{
        background-color: green;
    }
</style>

codepen link

Solution 2:

I had a look at this and it's puzzling. My best guess at this point is that it's a browser quirk/bug. With HTML and CSS there are so many ways to achieve the same thing so your workaround isn't necessarily bad. I managed to make it behave by putting the border on the inner-box's instead of the outer.

The reason I think it may be a bug is that it isn't consistent, as you have noticed yourself. In Chrome it happens at zoom level 125% (on a standard 1080 screen). In FireFox it doesn't happen at all on any zoomlevels and Edge has it at various zoom levels.

It looks a bit like the outer div at some levels ends up extending half a pixel wider than it's supposed to but it's hard to be sure.