Unexplained vertical gaps of different size in different viewport sizes between containers

Question

The Situation and Need

I have a situation in a project where in the website I would need to make stairs and there would be text or content in those stairs and the background of the stairs need to be opaque. And there is 1 more element to the right of each stair-step (an image essentially). Hence, I am just using css to float every thing to the left and mentioning width, so that everything fits 100% as needed.

The Problem:

There is a noticeable amount of gap below each of the stair-step which is visible in some viewports and is greater/lesser in some viewport sizes.

Fixes Tried:

1. Different html:- I had earlier tried different html layout in which i just wrap each stair-step and image in its own wrapper and then float them both inside it (ofcourse that didnt work)

   i. In this earlier version of html i tried to give it negative margins (also transforming to scale down to the next one and giving negative bottom values to a pseudo element) but they are doubling/overlapping each other and becoming more visible(thick white strips instead of opaque ones)

   ii. In the earlier html tried using a spacer div inside the stair-step div to fill the gap, but it seems like in each step it is showing up differently with different gaps and differently thicker/thinner overlapped white strips

Seeked Answers:

I have gone through many questions here and their fixes too and nothing helps and also gone through other bugs that maybe creating these (although that wasn't the case). Read many articles and spent hours to solve this Nothing Is helping with this issue.. Hence, please Upvote if you don't have an solution to this (or have any time to find a solution)

Note:

Would have been an easy fix if it were to be a solid color but it needs to be opaque to show through the background. Hence, cannot really do anything about that.

If I don't get any solution to this I might have to get rigid and maybe go down to a uglier fix (visually too) which I honestly don't want for this project.

Link and Code

*CODE:*

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

.background{
  background:url("https://static.pexels.com/photos/2324/skyline-buildings-new-york-skyscrapers.jpg");
  background-size:cover;
/*   min-height:90vh; */
  width:90vw;
  margin:20px auto;
  padding:20px;
}

.square{
  height:100px;
  width:50%;
  float:left;
}

#square1,
#square3,
#square5,
#square7,
#square9{
  background:rgba(255,255,255,.7);
  
}
#square2,
#square4,
#square6,
#square8,
#square10{
  background:red;
  
}
#square1{
  width:20%;
}
#square2{
  width:80%;
}

#square3{
  width:27%;
}
#square4{
  width:73%;
}

#square5{
  width:34%;
}
#square6{
  width:66%;
}

#square7{
  width:41%;
}
#square8{
  width:59%;
}



/***********
    =clearfix
***********/


.clearfix:before,
.clearfix:after{
 display: table;
 content: ''; 

}
.clearfix:after{
 clear: both; 

}

<div class="background clearfix">
  <section class="square" id="square1"></section>
<section class="square" id="square2"></section>
<section class="square" id="square3"></section>
<section class="square" id="square4"></section>
<section class="square" id="square5"></section>
<section class="square" id="square6"></section>
<section class="square" id="square7"></section>
<section class="square" id="square8"></section>
<section class="square" id="square9"></section>
<section class="square" id="square10"></section>

</div>

I have also made a codepen given below to recreate the issue, Ofcourse it is a much simpler html and css but still the issue is same (although the gaps might not be visible or be large in all viewport sizes). Please resize the window, the issue is mostly visible in small mobile viewports.

codepen link

Screenshot of the Recreated Issue:

As A few people were unable to recreate the same glitch/issue here's the screenshots below. Please zoom in and notice the vertical gaps between the stair-steps and the red blocks as explained above.

Answer 1

As you already tried several markup structures, I suggest yet another, where you drop the float and use normal block elements in combination with a pseudo.

This will make it so much easier to control the steps.

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

.background {
  background: url("https://static.pexels.com/photos/2324/skyline-buildings-new-york-skyscrapers.jpg");
  background-size: cover;
  width: 90vw;
  margin: 20px auto;
  padding: 20px;
}

.square {
  position: relative;
  height: 60px;
  background: rgba(255, 255, 255, .7);
  counter-increment: stair;                  /*  "counter", just for demo purpose  */
}
.square::after {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  background: red;
}
.square:nth-child(1)::after {
  content: 'Text in stair ' counter(stair);  /*  "counter", just for demo purpose  */
  width: 80%;
}
.square:nth-child(2)::after {
  content: 'Text in stair ' counter(stair);  /*  "counter", just for demo purpose  */
  width: 70%;
}
.square:nth-child(3)::after {
  content: 'Text in stair ' counter(stair);  /*  "counter", just for demo purpose  */
  width: 60%;
}
.square:nth-child(4)::after {
  content: 'Text in stair ' counter(stair);  /*  "counter", just for demo purpose  */
  width: 50%;
}
.square:nth-child(5)::after {
  content: 'Text in stair ' counter(stair);  /*  "counter", just for demo purpose  */
  width: 40%;
}

<div class="background">
  <section class="square"></section>
  <section class="square"></section>
  <section class="square"></section>
  <section class="square"></section>
  <section class="square"></section>
</div>