javascript - jQuery 动画影响下面的内容 (Chrome)

Question

我创建了一种效果，当屏幕上显示一行图标时就会运行。

动画本质上是改变 div 的 padding，使图标产生脉冲效果。

它在除 Chrome 之外的所有浏览器中都能完美运行(令人惊讶!)。出于某种原因，Chrome 在动画时会摇晃每个图标下的文本。我使用了 padding，希望它只会影响 div 中的内容(使用 box-sizing: border-box 模型)。

我确实为它编写了一个修复程序，它在 Chrome 中有效，但随后破坏了 Safari 中的布局。

所以我不确定我是否可以修复 Chrome 中的抖动，或者我是否可以更改我的修复以帮助 Safari 解决问题。

Here's the link to the page as it is at the moment ，没有 jQuery 修复。它在 JS 文件中，但被注释掉了。

这是运行动画的代码，修复在这里，只是注释掉了:

$('.wrapper').scroll(function(e) {

    var tTop = target.offset().top;
    var tTopOffset = tTop+target.height();

    if( tTop < height ) {

        if (flag) {

            targetDiv.animate({
                opacity: 1
            }, 500);


            targetDiv.each(function(i){

                // FIX breaks on safari, but fixes issue in Chrome...
                // targetDiv.css('height', targetDivHeight);

                $(this).delay((i++) * 900).animate({
                    padding: '0em'
                }, 400);


                $(this).animate({
                    padding: '0.5em'
                }, 400);

            }); 

            flag = false

        }


    } else {

        targetDiv.css('opacity', '0');
        flag = true;

    }

});

Answer 1

我认为这是因为您没有指定要设置动画的元素的宽度和高度。 border-box 不只是忽略填充值，它需要包含填充和边框的宽度和高度值。如上所述，使用 transform:scale 可能会很好，但恕我直言，使用 .animate() 实现它有点棘手，并且浏览器支持较少。

在控制台中尝试此操作并尝试修改您的代码。我试过了，它在最新的 Safari 和 Chrome 中运行良好。 (应该使用 .outerHeight() 来获得正确的值，因为您使用填充值来设置动画)

$ = jQuery;
var targetDiv = $('.icon-img-div');
var targetDivHeight = $('.icon-img-div').outerHeight();
var targetDivWidth = $('.icon-img-div').outerWidth();

targetDiv.each(function (i) {

    // this breaks on safari, but fixes issue in Chrome...
    targetDiv.css({
        height: targetDivHeight,
        width: targetDivWidth
    });

    $(this).delay((i++) * 900).animate({
        padding: '0em'
    }, 400);

    $(this).animate({
        padding: '0.5em'
    }, 400);

});