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

我认为这是因为您没有指定要设置动画的元素的宽度和高度。边框框不只是忽略填充值，它需要包括填充和边框的宽度和高度值。如上所述，使用 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);

});