Chrome Display Bug
by timothy003
HTML
<div id="box1" class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div id="box2" class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div id="box3" class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
CSS
*,
body {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
background: #505050;
}
body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px calc(6% / .9);
padding: 20px 5%;
}
.box {
border: 1px solid #fff;
border-radius: 10px;
background: #8e1515;
padding: 25px;
font-size: 12pt;
color: #fff;
overflow: hidden;
text-align: center;
transition: 0.5s ease-in-out;
}
.box:hover {
background: #191616;
}
.box:active {
background: #191616;
}
.box:focus {
background: #191616;
}