Я пытаюсь положить флип-карты рядом друг с другом с границей в 1 пиксель. Флип-карты должны переноситься на дополнительные ряды. Кажется, что в механизме рендеринга есть некоторое смещение, из-за которого фон иногда просвечивает. Смотрите случайные красные линии между рамкой и содержимым флип-карты здесь: ссылка на jsfiddle . Любые предложения по преодолению этой проблемы?
Мой код:
.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>