Chromium与Safari元素缩放时-webkit-mask渲染异常问题咨询

初始代码与问题现象 #

以下是初始实现代码：

CSS 代码 #

.image-container {
    position: relative;
    margin: 20px 0;
    width: min(calc(100vw - 100px), 500px);
    height: auto;
    display: block;
    margin: 0 auto;
    -webkit-mask: url(#m);
    mask: url(#m);
}
img {
    width: 100%;
    height: 100%;
    display: block;
}
svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <div class="container">
            <div class="image-container">
                <img src="https://picsum.photos/500/300" alt="Test image" />
                <svg width="100%" height="100%">
                    <mask id="m" maskUnits="userSpaceOnUse">
                        <rect width="108%" height="100%" fill="white"></rect>
                        <circle
                            style="cx: 100%; transform: translateX(-100px)"
                            cy="0"
                            r="92px"
                            fill="black"
                        />
                    </mask>
                </svg>
            </div>
        </div>
    </body>
</html>

现象说明：

• 页面初次加载时显示正常，能看到被半圆裁切的图像
• 调整窗口大小使图像缩放后：
  • Chrome浏览器中，<circle>元素会停留在初始位置，不随图像同步移动
  • Safari浏览器中，图像直接消失，必须刷新页面才能重新显示
• 若在运行时手动修改<circle>元素（比如移除再重新添加CSS属性），circle的位置会恢复正常

部分修复后的代码与新问题 #

将<circle>的cx从CSS内联样式改为SVG内联属性（设置cx="100%"）后，缩放异常问题可以被修复：

修改后的CSS 代码 #

.image-container {
    position: relative;
    margin: 20px 0;
    width: min(calc(100vw - 100px), 500px);
    height: auto;
    display: block;
    margin: 0 auto;
    -webkit-mask: url(#m);
    mask: url(#m);
}
img {
    width: 100%;
    height: 100%;
    display: block;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

修改后的HTML 代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <div class="container">
            <div class="image-container">
                <img src="https://picsum.photos/500/300" alt="Test image" />
                <svg width="100%" height="100%">
                    <mask id="m" maskUnits="userSpaceOnUse">
                        <rect width="108%" height="100%" fill="white"></rect>
                        <circle
                            class="circle"
                            style="transform: translateX(-100px)"
                            cx="100%"
                            cy="0"
                            r="92px"
                            fill="black"
                        />
                    </mask>
                </svg>
            </div>
        </div>
    </body>
</html>

但如果将cx设置为cx="calc(100% - 10px)"，之前的缩放异常问题会再次出现。

疑问 #

1. 是否在实现过程中忽略了某些关键细节？
2. 这种跨浏览器的表现差异是浏览器Bug还是预期特性？
3. 为何仅Chrome和Safari存在该问题，Firefox表现完全正常？

内容的提问来源于stack exchange，提问作者user188596