Retina屏上<clipPath>的transform-origin设置异常问题问询

背景 #

我尝试使用CSS animation-timeline 动画，搭配Blob形状的<clipPath>实现页面滚动时元素的渐显效果，代码需在新版Edge或Chrome浏览器中测试。目标<div>元素设置了clip-path: url(#blob)，其中#blob是SVG内的<clipPath>元素，该元素配置了clipPathUnits="objectBoundingBox"，内部<path>定义Blob形状。<clipPath>初始缩放为0，通过动画时间轴将其缩放到2.5。

核心问题 #

<clipPath>的transform-origin在Retina显示屏上缩放原点错误，非Retina屏显示正常（已在2024款13寸Macbook Air、2017款27寸iMac及多款非Retina屏测试）。我提供了最小复现代码及演示示例，实际效果可查看对比动图（左侧Retina屏，右侧非Retina屏）。

已尝试的临时方案 #

通过媒体查询针对Retina屏调整transform-origin：

clipPath {
    transform-origin: 50vw 50vh;
    @media (-webkit-min-device-pixel-ratio: 2) { 
       transform-origin: 100vw 100vh;
    }
    /* 其他动画相关代码 */
}

但不确定该方案是否具备通用性，希望找到问题根源及可靠的解决方法。

后续进展 #

已在Chromium缺陷追踪平台提交问题，该缺陷已被官方确认。

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