CSS backdrop blur filter not rendered perfectly on column-count

I've a problem, in chrome, a backdrop blur filter is not rendered perfectly inside a with column-count.

this is the code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .container-with-columns {
                column-count: 2;
                border: solid 1px black;
            }

            .back-img {
                position: relative;
                width: 300px;
                height: 200px;
                border: solid 1px blue;

                background-image: url("/res/some-image.jpg");
                background-position: center;
            }

            .mask {
                position: absolute;
                left: 25%;
                top: 25%;
                right: 25%;
                bottom: 25%;
                border: solid 1px red;

                background-color: rgba(0,0,0, 0.5);
                backdrop-filter: blur(10px);
            }
        </style>
    </head>
    <body>
        <div class="container-with-columns">
            <div class="back-img">
                <div class="mask"></div>
            </div>
            <div class="back-img">
                <div class="mask"></div>
            </div>
            <div class="back-img">
                <div class="mask"></div>
            </div>
        </div>
        
    </body>
    </html>

The blur mask works perfectly outside the container, but not inside. Can you help me fix this problem?