HTML-css: how to get rid of the outline when transforming a block?

Question:

The task is to make a cross-browser layout of this kind of slider. Apply transform + pseudo-elements. Everything seems to be simple, but the outline of the wrapper block appears from somewhere:

.wrapper {
  width: 250px;
  height: 180px;
  margin: 50px;
  border-radius: 30px 20px;
  transform: skew(10deg, 5deg);
  position: relative;
  overflow: hidden;
}
.img {
  width: 150%;
  transform: translate(-20px, -20px) skew(-10deg, -5deg);
}
.wrapper:before {
  content: '';
  position: absolute;
  left: 220px;
  display: block;
  width: 60px;
  height: 200px;
  border-radius: 20px;
  background-color: white;
  transform: skew(-20deg, -10deg);
  z-index: 1;
}

.wrapper:after {
  content: '';
  position: absolute;
  top: 160px;
  display: block;
  width: 250px;
  height: 60px;
  border-radius: 20px;
  background-color: white;
  transform: skew(-20deg, -10deg);
}
.arrow {
  position: absolute;
  width: 30px;
  height: 40px;
  background-color: red;
  z-index: 2;
  top: 135px;
  left: 180px;
  color: white;
  transform: rotate(45deg) skew(0, 0);
  border-radius: 5px;
  cursor: pointer;
}
.arrow div {
  font-weight: bold;
  padding: 10px 0 0 7px;
  transform: rotate(-45deg);
}
<div class="wrapper">
  <img src="https://avatars.mds.yandex.net/get-pdb/33827/8ee85d23-431a-487b-8efb-d8f5fdd6bf29/s1200" alt="" class="img" />
  <div class="arrow"><div>>><div></div>
</div>

What is this contour and how to get rid of it?

And, perhaps, there is some other way to make such a slider cross-browser?

Answer:

Add translateZ(0) image and there are no more outlines:

.wrapper {
  width: 250px;
  height: 180px;
  margin: 50px;
  border-radius: 30px 20px;
  transform: skew(10deg, 5deg);
  position: relative;
  overflow: hidden;
}
.img {
  width: 150%;
  transform: translate(-20px, -20px) skew(-10deg, -5deg) translateZ(0);
}
.wrapper:before {
  content: '';
  position: absolute;
  left: 220px;
  display: block;
  width: 60px;
  height: 200px;
  border-radius: 20px;
  background-color: white;
  transform: skew(-20deg, -10deg);
  z-index: 1;
}

.wrapper:after {
  content: '';
  position: absolute;
  top: 160px;
  display: block;
  width: 250px;
  height: 60px;
  border-radius: 20px;
  background-color: white;
  transform: skew(-20deg, -10deg);
}
.arrow {
  position: absolute;
  width: 30px;
  height: 40px;
  background-color: red;
  z-index: 2;
  top: 135px;
  left: 180px;
  color: white;
  transform: rotate(45deg) skew(0, 0);
  border-radius: 5px;
  cursor: pointer;
}
.arrow div {
  font-weight: bold;
  padding: 10px 0 0 7px;
  transform: rotate(-45deg);
}
<div class="wrapper">
  <img src="https://avatars.mds.yandex.net/get-pdb/33827/8ee85d23-431a-487b-8efb-d8f5fdd6bf29/s1200" alt="" class="img" />
  <div class="arrow"><div>>><div></div>
</div>
Scroll to Top