I'm trying to place flip cards next to each other with a 1px border in between. The flip cards should wrap to additional rows. There seems to be some misalignment in the rendering engine that causes the background to bleed through on occasion. See the random red lines between the border and flip card content here: link to jsfiddle. Any suggestions for overcoming this problem?
My code is:
.flip-card-row {
display: flex;
flex-wrap: wrap
}
.flip-card-col {
background-color: red;
position: relative;
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%
}
@media (min-width: 800px) {
.flip-card-col {
flex:0 0 16.6666666667%;
max-width: 16.6666666667%
}
}
.flip-card-col-border {
border-bottom: 1px solid #c7c9c8;
border-right: 1px solid #c7c9c8
}
@media (max-width: 800px) {
.flip-card-col-border:nth-child(-n+3) {
border-top:1px solid #c7c9c8
}
.flip-card-col-border:nth-child(3n+1) {
border-left: 1px solid #c7c9c8
}
}
@media (min-width: 800px) {
.flip-card-col-border:nth-child(-n+6) {
border-top:1px solid #c7c9c8
}
.flip-card-col-border:nth-child(6n+1) {
border-left: 1px solid #c7c9c8
}
}
.square {
padding-top: 100%
}
.panel {
background-color: #c7c9c8;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-perspective: 600px;
perspective: 600px
}
.panel .front,.panel .back {
position: absolute;
width: inherit;
height: inherit;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in
}
.panel .back {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg)
}
.panel:hover .front {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
.panel:hover .back {
-webkit-transform: rotateY(0);
transform: rotateY(0)
}
.bg-light-blue {
background: #72899b
}
.bg-white {
background: #fff
} <div class="flip-card-row">
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
</div>
<p></p>
<div class="flip-card-row">
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
</div>
<p></p>
<div class="flip-card-row">
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
</div>
<p></p>
<div class="flip-card-row">
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
</div>
<p></p>
<div class="flip-card-row">
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
</div>
<p></p>
<div class="flip-card-row">
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
</div>
<p></p>
<div class="flip-card-row">
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
</div>
<p></p>
<div class="flip-card-row">
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
</div>
<p></p>
<div class="flip-card-row">
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
</div>
<p></p>
<div class="flip-card-row">
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
</div>
<p></p>
<div class="flip-card-row">
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
</div>
<p></p>
<div class="flip-card-row">
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
<div class="flip-card-col flip-card-col-border">
<div class="square">
<div class="panel">
<div class="front bg-white">
</div>
<div class="back bg-light-blue">
</div>
</div>
</div>
</div>
</div>