Windows版Chrome大文本缩放时空白问题求助

问题描述 #

开发了一个视频上方的文本遮罩组件，通过JS根据屏幕尺寸生成超大初始缩放值，用GSAP实现缩放平移动画。该组件在Mac笔记本、Firefox及4K显示器上正常，但在Windows版Chrome中，内容会消失，直到动画缩放到较小尺寸才恢复。

原实现代码：

var scale = (window.innerWidth / 175) + 2.5; // window / character width + scale padding

var distanceFromViewportCenterToCharCenter = 350;
var offsetAfterScaling = distanceFromViewportCenterToCharCenter * scale;
var endScale = 0.2;

gsap.fromTo(".title", 
            {opacity: 1, transform: `translate(${offsetAfterScaling}px, 0) scale(${scale})`},
            {transform: `translate(0, 0) scale(${endScale})` , duration: 5,  repeat:-1}
           );

问题原因 #

Windows Chrome在处理极端大的scale值时，会触发视口外元素的裁剪优化——当元素被缩放并平移到距离可视区域过远的位置时，浏览器会暂时停止渲染该元素，直到它回到可视范围内。此外，使用自定义transform字符串而非GSAP的原生属性，可能导致浏览器无法正确预判动画轨迹，加重渲染异常。

修复方案 #

1. 限制最大缩放值 #

避免scale值过大，给计算结果设置一个合理上限：

var scale = Math.min((window.innerWidth / 175) + 2.5, 20); // 限制最大缩放为20，可根据需求调整

2. 使用GSAP原生动画属性 #

抛弃自定义transform字符串，改用GSAP提供的x、scale等单独属性，让GSAP优化动画渲染：

var scale = Math.min((window.innerWidth / 175) + 2.5, 20);
var distanceFromViewportCenterToCharCenter = 350;
var offsetAfterScaling = distanceFromViewportCenterToCharCenter * scale;
var endScale = 0.2;

gsap.fromTo(".title", 
            {opacity: 1, x: offsetAfterScaling, scale: scale},
            {x: 0, scale: endScale, duration: 5, repeat: -1, willChange: "transform"}
           );

3. 添加CSS渲染优化 #

给文本元素添加GPU加速相关属性，提示浏览器提前优化渲染：

.title {
  transform-origin: center; /* 确保缩放原点为元素中心，避免偏移异常 */
  backface-visibility: hidden; /* 触发GPU加速 */
  will-change: transform; /* 提示浏览器该元素将有transform动画 */
}

验证效果 #

调整后，Windows Chrome会正确预判动画轨迹，不会因元素暂时在视口外而停止渲染，同时GPU加速也能提升动画流畅度。

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