CSS过滤器中断溢出：隐藏在Webkit中

Question

所以我在基于Webkit的浏览器（Chrome，Opera，...）中遇到了这个奇怪的CSS问题。当我在父div和overflow:hidden（或任何其他类型的过滤器）上应用filter:grayscale(100%)时，溢出会中断。由于某种原因，这些元素不再被隐藏。

我已经在Chrome，Firefox，Edge和Opera上对此进行了测试。 Edge和Firefox似乎没有这个问题，但Chrome和Opera确实有这个问题。所以我想这可能是基于Webkit的浏览器的一个问题。

I've made a small video to better illustrate the issue（视频中的图片可能与此帖中的图片不同，但效果相同。光标也出现在错误的位置，但它实际上点击了箭头和徘徊/点击图标。显然，ShareX不喜欢高DPI显示器。）

有没有人知道如何解决这个问题？

HTML

<div id="projects">
    <img id="left" src="https://i.imgur.com/8u7Kir7.png">
    <div id="scroller">
            <figure><a id="portfolio1"><img src="https://i.imgur.com/OU2VsUm.png" alt="BreakingBook"></a></figure>
            <figure><a id="portfolio2"><img src="https://i.imgur.com/OU2VsUm.png" alt="BreakingBook"></a></figure>
            <figure><a id="portfolio3"><img src="https://i.imgur.com/OU2VsUm.png" alt="BreakingBook"></a></figure>
            <figure><a id="portfolio4"><img src="https://i.imgur.com/kml3KaY.png" alt="RedAlert"></a></figure>
            <figure><a id="portfolio5"><img src="https://i.imgur.com/kml3KaY.png" alt="RedAlert"></a></figure>
            <figure><a id="portfolio6"><img src="https://i.imgur.com/kml3KaY.png" alt="RedAlert"></a></figure>
    </div>
    <img id="right" src="https://i.imgur.com/RNNpheT.png">
</div>

SCSS

#projects {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
        min-width: initial;
        max-width: initial;
        width: 70px;
        height: 70px;
    }
    #scroller {
        width: 330px;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border: 5px solid black;
        border-radius: 25px;
        padding-left: 20px;
        padding-right: 20px;
        figure {
            &:first-of-type {
                margin-left: 20px;
            }
            &:last-of-type {
                padding-right: 40px;
            }
            width: 70px;
            height: 70px;
            margin-right: 40px;
            display: block;
            a {
                filter: grayscale(100%);
                line-height: initial;
                opacity: .3;
                &:hover {
                    opacity: 1;
                }
            }
        }
    }
}

的jQuery

$('#projects').find('a').click(function() {
        $('#projects').find('a').not(this).removeAttr('style');
        $(this).css('opacity', '1').css('filter', 'initial');
    });
$('#left').click(function() {
        $('#scroller').animate({ scrollLeft: $('#scroller').scrollLeft() - 330 }, 500);
});    

$('#right').click(function() {
        $('#scroller').animate({ scrollLeft: 330 + $('#scroller').scrollLeft() }, 500);
});