在使用滤镜：模糊()时，图像右边的垂直线。

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(); 和 clip-path 你的形状是一个圆，所以有一个问题。你的形状是一个圆，所以有一个。border-radius 解决办法。

尝试添加到图片父元素中。

&__shape{
  /* add */      
  border-radius: 100%; /* will do the same circle form = your clip-path */
  overflow: hidden; /* will hide everything outside the form, including your line */
}

overflow: hidden; + border-radius: 100%; 的父元素上，将隐藏该错误。