CODEWITHSUNDEEP
javascriptjquerycssgoogle-chrome
lukeseager
lukeseager

Reputation: 2615

jQuery animation affects content below (Chrome)

I've create an affect that runs when a row of icons are visible on screen.

The animation is essentially changing the padding of a div, giving the effect of a pulse from the icons.

It works perfectly in every browser except Chrome (surprisingly!). Chrome for some reason wobbles the text under each icon while it animates. I used padding in the hopes that it would only affect the content within the div (using the box-sizing: border-box model).

I did write a fix for it which works in Chrome but then breaks the layout in Safari.

So I'm not sure if I can fix the wobble in Chrome or if I can alter my fix to help Safari out.

Here's the link to the page as it is at the moment, without the jQuery fix. It's in the JS file but commented out.

Here's the code that runs the animation, the fix is in here, just commented out:

$('.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;

    }

});

Upvotes: 3

Views: 154

Answers (1)

Jaeho Lee
Jaeho Lee

Reputation: 126

I think it is because you didn't specified the width and height of the element you are trying to animate. border-box doesn't just ignore padding value, it needs width and height value that includes padding and border. Using transform:scale could be nice either as commented above, but IMHO it is a bit tricky to achieve with .animate() and has less browser support.

Try this in console and try modify your code. I tried and it works well in the latest Safari and Chrome. (should use .outerHeight() to get correct value, since you use padding value to animate)

$ = 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);

});

Upvotes: 5

Related Questions