Fix for Mirrored Diagonal Background Pattern

Question

I've created a solution for a mirrored diagonal background pattern but bug exists only in Firefox where at certain screen widths, a vertical line appears between the left and right positioned elements. Does anyone have a solution or hack? The only requirement is that the background be CSS (no linked image files).

.stripes-background {
    width: 50%;
    margin:0 auto;
    padding: 2em;
    position: relative;
    overflow:hidden;
    border-radius:3px;
}

.stripes-diagonal-left {
    background-color: #333333;
    background-image: repeating-linear-gradient(
    25deg,
    transparent,
    transparent 20px,
    rgba(255, 255, 255, 0.05) 20px,
    rgba(255, 255, 255, 0.05) 40px
    );
    position: absolute;
    top: 0;
    width: 50%;
    height: 105%; 
    z-index: -2;
    left: 0;
}

.stripes-diagonal-right {
    background-color: #333333;
    background-image: repeating-linear-gradient(
    25deg,
    transparent,
    transparent 20px,
    rgba(255, 255, 255, 0.05) 20px,
    rgba(255, 255, 255, 0.05) 40px
    );
    position: absolute;
    top: 0;
    width: 50%;
    height: 105%; 
    z-index: -2;
    transform: rotateY(180deg);
    left: 50%;
}

<div class="stripes-background">
    <div class="stripes-diagonal-left" role="presentation"></div>
    <div class="stripes-diagonal-right" role="presentation"></div>
</div>

Answer 1

First you can put all this into one element using multiple background and to fix the small gap simply make both gradient to overlap a little.

.stripes-background {
    width: 50%;
    margin:0 auto;
    padding: 2em;
    border-radius:3px;
    background: repeating-linear-gradient(
      25deg,
      transparent,
      transparent 20px,
      rgba(255, 255, 255, 0.05) 20px,
      rgba(255, 255, 255, 0.05) 40px
    ) left,
    repeating-linear-gradient(
      -25deg,
      transparent,
      transparent 20px,
      rgba(255, 255, 255, 0.05) 20px,
      rgba(255, 255, 255, 0.05) 40px
    ) right,
    #333333;
   background-size:50.01% 100%; /*a litte bigger than 50% */
   background-repeat:no-repeat;
    
}

<div class="stripes-background">
</div>

And to better handle the repeating gradient you can use CSS variable to avoid duplicate code:

.stripes-background {
    --c:transparent,
      transparent 20px,
      rgba(255, 255, 255, 0.05) 20px,
      rgba(255, 255, 255, 0.05) 40px;
      
    width: 50%;
    margin:0 auto;
    padding: 2em;
    border-radius:3px;
    background: 
     repeating-linear-gradient( 25deg,var(--c)) left,
     repeating-linear-gradient(-25deg,var(--c)) right,
     #333333;
   background-size:50.01% 100%; /*a litte bigger than 50% */
   background-repeat:no-repeat;
    
}

<div class="stripes-background">
</div>