jQuery UI shake - Padding disappears

Question

I'm having this tiny little problem. I have a box inside my wrapper, which I want to shake back and forth. The effect works fine, but when I add a padding to the #box the padding disappears while the animation is on. The #box also have a box-sizing: border-box so the padding won't effect the size of the box.

If I remove the box-sizing: border-box the animation works, but then the padding is affecting the actual size of the box, by adding 20px extra on every side, which is not intended.

I've tried to put an !important the the padding and the box-sizing, but that didn't worked either.

I've also tried change border-box with content-box (an answer from a google search) but that didn't worked either.

---

This is my code:

HEAD-section:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

HTML:

<div id="wrapper">
    <div id="box">
    </div>
</div>

CSS:

body {
    margin:                                         0;
    padding:                                        0;
}

* {
    -webkit-box-sizing:                             border-box;
    -moz-box-sizing:                                border-box;
    -o-box-sizing:                                  border-box;
    -ms-box-sizing:                                 border-box;
    box-sizing:                                     border-box;
}

#wrapper {
    width:                                          400px;
    height:                                         250px;
    position:                                       absolute;
    top:                                            0;
    right:                                          0;
    bottom:                                         0;
    left:                                           0;
    margin:                                         auto;
}

#box {
    width:                                          400px;
    height:                                         250px;
    background:                                     gray;
    padding:                                        20px;
}

jQuery:

$("#box").effect( "shake", { direction: "left", times: 4, distance: 50}, 2600 );

Here is a Fiddle Live Demo

Any idea what is going on?

Thanks - TheYaXxE

Answer 1

Im not sure why this happens, both padding and margin are not considered during the animation. BUT I manage a workaround creating one more container for content, you can`t set padding on the animated element, but you can on another element inside it.

CHECK this fiddle > http://jsfiddle.net/luckmattos/uX3g6/2/

HTML

<div id="wrapper">
    <div id="box">
        <div class="container">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
        </div>
    </div>
</div>

CSS

body {
    margin:                                         0;
    padding:                                        0;
}

* {
    -webkit-box-sizing:                             border-box;
    -moz-box-sizing:                                border-box;
    -o-box-sizing:                                  border-box;
    -ms-box-sizing:                                 border-box;
    box-sizing:                                     border-box;
}

#wrapper {
    width:                                          400px;
    height:                                         250px;
    position:                                       absolute;
    top:                                            0;
    right:                                          0;
    bottom:                                         0;
    left:                                           0;
    margin:                                         auto;
}

#box {
    height:                                         250px;
    background:                                     gray;
}

.container {
    background:#f00;
    height:                                         250px;
    padding:                                        20px;
}

JS IS THE SAME

Answer 2

Updated Fiddle

Add the below to your code above the animation:

if ($.ui) {
    (function () {
        var oldEffect = $.fn.effect;
        $.fn.effect = function (effectName) {
            if (effectName === "shake") {
                var old = $.effects.createWrapper;
                $.effects.createWrapper = function (element) {
                    var result;
                    var oldCSS = $.fn.css;

                    $.fn.css = function (size) {
                        var _element = this;
                        var hasOwn = Object.prototype.hasOwnProperty;
                        return _element === element && hasOwn.call(size, "width") && hasOwn.call(size, "height") && _element || oldCSS.apply(this, arguments);
                    };

                    result = old.apply(this, arguments);

                    $.fn.css = oldCSS;
                    return result;
                };
            }
            return oldEffect.apply(this, arguments);
        };
    })();
}

This is a known bug