html - 为什么图像的左右两侧会出现这条奇怪的闪烁垂直线？

Question

悬停时圆形图像的左右两侧出现一条奇怪的垂直线。我真的不明白为什么会这样。这个问题并没有解决，而且太麻烦了。我使用 VSCode 作为代码编辑器，使用 chrome 最新版本作为浏览器和 windows 7 高级操作系统。

HTML：

<div class="row">
   <div class="story">
        <figure class="story__shape">
            <img src="img/nat-8.jpg" alt="Person on a tour" class="story__img">
            <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>I had such a wonderful experience with you. Your co-ordination and time management is the best thing I felt. I found that you guys give value to the people not for the money. It is so good that you are following the rules strictly when it comes for negative things. Looking forward to have many more trips.</p>
             </div>
    </div>

萨斯 CSS（SCSS）：

.story{

width: 75%;
margin: 0 auto;
box-shadow: 0 3rem 6rem rgba( $color-black, .1);
background-color: $color-white;
padding: 6rem;
padding-left: 9rem;
font-size: $default-font-size;
transform: skewX(-12deg);

&__shape{
    height: 15rem;
    width: 15rem;
    float: left;
    -webkit-shape-outside: circle(50% at 50% 50%);
    shape-outside: circle(50% at 50% 50%);

    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);

    transform: translateX(-3rem) skewX(12deg);
    position: relative;
}

&__img{
    height: 100%;
    transform: translateX(-4rem) scale(1.4);
    backface-visibility: hidden;
    transition: all .5s;
}

&__text{
    transform: skewX(12deg);
}

&__caption{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 20%);
    color: $color-white;
    text-transform: uppercase;
    font-size: 1.7rem;
    text-align: center;
    opacity: 0;
    transition: all .5s;
    backface-visibility: hidden;
}

&:hover &__caption{
    opacity: 1;
    transform: translate(-50%, -50%);
}

&:hover &__img{
    transform:translateX(-4rem) scale(1);
    filter: blur(3px) brightness(80%);
}   }//end of .story class

标签： htmlcsssasscss-transitionscss-transforms

Answer 1

尝试在 &__shape 选择器中使用溢出：隐藏