图像右侧的垂直线

Question

我正在为该网站建立一个故事板块。以下是故事的scss代码：

    .story{
    width: 75%;
    background-color: $color-white;
    font-size: 1.6rem;
    margin: 0 auto;
    box-shadow: 0 3rem 6rem rgba(0,0,0,0.2);
    border-radius: .1rem;
    padding: 4rem;
    padding-left: 5.5rem;
    transform: skewX(-12deg);

    &__shape{
        height: 15rem;
        width: 15rem;
        float: left;
        shape-outside: circle(50% at 50% 50%);
        clip-path: circle(50% at 50% 50%);
        transform: translateX(-1.5rem) 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%);
        font-size: 1.7rem;
        text-transform: uppercase;
        color: $color-white;
        text-align: center;
        opacity: 0;
        transition: all .5s;
        backface-visibility: hidden;
    }

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

    &:hover &__img{
        transform: translateX(-4rem) scale(1);
        filter: blur(3px) brightness(80%);
    }
}

当我将鼠标悬停时，图像的右侧会出现一条垂直线，当悬停时会消失。以下是问题的图像。

没有悬停：

[悬停：

此问题仅出现在chrome上，而不出现在Mozilla Firefox上。

Answer 1

这是常见的filter: blur();问题。

尝试添加到图像父元素：

&__shape{
  overflow: hidden;
  border-radius: 100%;
}

父元素上的

overflow: hidden;将隐藏该错误。在这种情况下，不需要shape-outside: circle(50% at 50% 50%);和clip-path: circle(50% at 50% 50%);，请尝试将其关闭。