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;
}