Chrome：仅在某些过渡效果期间出现奇怪的滚动条

Question

我使用jquery在我的全屏幕背景图片上应用以下效果：

function moveDown(){
    $('body').find('img').delay($delay*1000).animate({top: "+="+$distance}, $seconds*1000,'swing')
}
function zoomOut(){
    $('body').find('img').css({"transition":"all 6s linear","transform":"scale(1)"});
}
function zoomIn(){
    $('body').find('img').delay($delay*1000).animate(obj,6500,'linear');
}

这很有效但只有第二个函数zoomOut（）我只在Chrome中遇到问题。正在执行转换时，我会在正常滚动条旁边显示一个奇怪的滚动条，这个滚动条仅在转换正在进行时显示。正如你在这张图片上看到的那样

转换后它再次消失，在转换过程中再次出现？

有关如何摆脱第二个滚动条的任何想法吗？

Answer 1

这里有两件事我开始怀疑。

您正在为moveDown和zoomIn使用基于javascript的动画，但随后在zoomOut上设置CSS动画值。尝试与动画保持一致，并尽可能使用CSS动画，因为与javascript动画相比，它们表现更好（使用硬件加速等）。

当您设置CSS过渡值时，当另一个动画触发时，它不会被“取消应用”，这意味着在moveDown或zoomIn中完成的每个增量更改都将应用六秒过渡。

如果您需要快速而又脏的修复，可以将以下块放在zoomIn和moveDown中：

$('body img').css({'transition':'none', 'transform':'none'});

但理想情况下，您可以将所有这些CSS转换包装在一个类中，然后通过JavaScript应用该类。

只是我的2¢