Blazor Server移动端Velocity浏览器CSS加载动画异常问题求助

问题原因 #

• Velocity浏览器基于旧版WebKit内核，对CSS transform 复合变换（同时使用translate和scale）的支持存在缺陷，动画帧计算时易出现元素偏移或渲染错乱
• 双动画（.loader的pulse和:after的scaleUp）的关键帧时序同步在旧内核中处理异常，导致偶尔显示错位
• 旧内核对position:absolute结合transform的渲染优化不足，触发了布局重绘BUG

针对性解决方案 #

1. 兼容旧内核的CSS调整（添加前缀+简化变换） #

修改后的CSS代码，针对旧WebKit内核添加兼容前缀，同时简化变换逻辑，降低浏览器计算压力：

.location{
    text-align:center;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #0093DD;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    /* 触发硬件加速，提升渲染稳定性 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: pulse 1s linear infinite;
    animation: pulse 1s linear infinite;
}

.loader:after {
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    border: 5px solid #0093DD;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    /* 用calc定位替代translate，避免变换属性叠加 */
    left: calc(50% - 24px);
    top: calc(50% - 24px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: scaleUp 1s linear infinite;
    animation: scaleUp 1s linear infinite;
}

@-webkit-keyframes scaleUp {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    60%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes scaleUp {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    60%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}

@-webkit-keyframes pulse {
    0%, 60%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    80% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@keyframes pulse {
    0%, 60%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    80% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

HTML代码保持不变：

<div class="location">
    <div class="loader"></div>
</div>

调整说明：

• 用calc(50% - 24px)替代translate(-50%,-50%)，避免变换属性叠加，减少旧内核计算负担
• 为所有动画和transform添加-webkit-前缀，适配旧WebKit内核
• 添加translateZ(0)触发硬件加速，提升渲染稳定性
• 给scaleUp动画增加opacity过渡，掩盖可能的渲染瑕疵

2. 更稳定的替代实现方案（SVG加载动画） #

如果上述CSS调整仍有问题，推荐使用SVG动画——它在移动端旧浏览器中的兼容性远优于CSS复合动画：

<div class="location">
    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="24" cy="24" r="19" stroke="#0093DD" stroke-width="5" stroke-linecap="round">
            <animate attributeName="r" from="19" to="23" dur="1s" repeatCount="indefinite" values="19;23;19"/>
        </circle>
        <circle cx="24" cy="24" r="19" stroke="#0093DD" stroke-width="5" stroke-linecap="round">
            <animate attributeName="r" from="0" to="19" dur="1s" repeatCount="indefinite" values="0;19;0"/>
            <animate attributeName="opacity" from="1" to="0" dur="1s" repeatCount="indefinite"/>
        </circle>
    </svg>
</div>

配套CSS只需居中：

.location{
    text-align:center;
}

SVG动画优势：

• 不依赖CSS transform的复杂计算，渲染逻辑更简单
• 旧WebKit内核对SVG基础动画支持完善，几乎无兼容性问题
• 动画效果和原CSS实现一致，无需调整交互体验

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