我有一个 css 故障，需要一些帮助来解决它

Question

我在解决这个问题时遇到了一些问题，希望有人能帮助我。

.story {
  width: 75%;
  margin: 0 auto;
  box-shadow: 0 3rem 6rem;
  background-color: #fff;
  border-radius: 5px;
  padding: 6rem;
  padding-left: 9rem;
  font-size: 1.6rem;
  transform: skewX(-12deg);
}

.story__shape {
  width: 15rem;
  height: 15rem;
  float: left;
  clip-path: circle(50% at 50% 50%);
  -webkit-shape-outide: circle(50% at 50% 50%);
  -webkit-shape-outsie: circle(50% at 50% 50%);
  shape-outside: circle(50% at 50% 50%);
  transform: skewX(12deg) translateX(-3rem);
  position: relative;
  backface-visibility: hidden;
}

.story__img {
  height: 100%;
  transform: translateX(-4rem);
  transition: all .5s;
}

.story__text {
  transform: skewX(12deg);
}

.story__caption {
  color: #fff;
  text-transform: uppercase;
  font-size: 1.7rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  opacity: 0;
  transition: all .5s;
}

.story:hover .story__img {
  transform: translate(-4rem);
  filter: blur(2px) brightness(70%);
}

.story:hover .story__caption {
  opacity: 1;
  transform: translate(-50%, -50%);
}

<div class="row">
  <div class="story">
    <figure class="story__shape">
      <img class="story__img" src="https://image.shutterstock.com/z/stock-photo-mountains-during-sunset-beautiful-natural-landscape-in-the-summer-time-407021107.jpgg" alt="Person on a tour">
      <figcaption class="story__caption">Mary Smith</figcaption>
    </figure>
    <div class="story__text">
      <h3 class="heading-tertiary u-margin-bottom-small">I had the best week ever with my family</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta tenetur ad non doloremque, mollitia esse fugit dolores culpa ut est molestiae fuga iusto neque tempora rem ab voluptatem. Dolores, minus. Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Dicta tenetur ad non doloremque, mollitia esse.
      </p>
    </div>
  </div>
</div>

我设置了codepen 来说明问题。我正在使用谷歌浏览器，尚未测试是否在其他浏览器中也存在问题。

当您将鼠标悬停在父容器的任何部分上时，将应用过滤器：blur(1px)。然而，容器 story__shape 的边缘在过渡过程中似乎有一些透明度，并沿盒子边缘显示线条。他们在过渡后离开。

我试过“背面可见性：隐藏；”以及“will-change：transform;”无济于事。如果有人可以帮助我，将不胜感激。

Answer 1

将overflow: hidden; 添加到.story__shape

.story {
  width: 75%;
  margin: 0 auto;
  box-shadow: 0 3rem 6rem;
  background-color: #fff;
  border-radius: 5px;
  padding: 6rem;
  padding-left: 9rem;
  font-size: 1.6rem;
  transform: skewX(-12deg);
}

.story__shape {
  width: 15rem;
  height: 15rem;
  float: left;
  clip-path: circle(50% at 50% 50%);
  -webkit-shape-outide: circle(50% at 50% 50%);
  -webkit-shape-outsie: circle(50% at 50% 50%);
  shape-outside: circle(50% at 50% 50%);
  transform: skewX(12deg) translateX(-3rem);
  position: relative;
  backface-visibility: hidden;
  overflow: hidden;
}

.story__img {
  height: 100%;
  transform: translateX(-4rem);
  transition: all .5s;
}

.story__text {
  transform: skewX(12deg);
}

.story__caption {
  color: #fff;
  text-transform: uppercase;
  font-size: 1.7rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  opacity: 0;
  transition: all .5s;
}

.story:hover .story__img {
  transform: translate(-4rem);
  filter: blur(2px) brightness(70%);
}

.story:hover .story__caption {
  opacity: 1;
  transform: translate(-50%, -50%);
}

<div class="row">
  <div class="story">
    <figure class="story__shape">
      <img class="story__img" src="https://image.shutterstock.com/z/stock-photo-mountains-during-sunset-beautiful-natural-landscape-in-the-summer-time-407021107.jpgg" alt="Person on a tour">
      <figcaption class="story__caption">Mary Smith</figcaption>
    </figure>
    <div class="story__text">
      <h3 class="heading-tertiary u-margin-bottom-small">I had the best week ever with my family</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta tenetur ad non doloremque, mollitia esse fugit dolores culpa ut est molestiae fuga iusto neque tempora rem ab voluptatem. Dolores, minus. Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Dicta tenetur ad non doloremque, mollitia esse.
      </p>
    </div>
  </div>
</div>