I'm attempting to create an animated toggle effect on a box using jQuery UI's drop feature. However, I've encountered some trouble due to the box having box-sizing: border-box applied which is causing issues with the animation.
During the animation, it seems like the box is shrinking in width and height as if losing its padding.
HTML
<button>Toggle</button>
<div id="box">
<p>Some content</p>
</div>
CSS
#box{
width: 100%;
height: 200px;
padding: 20px;
position: absolute;
top: 50%;
right: 0;
left: 0;
margin-top: -100px;
background: #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
JS
$("button").click(function(){
$("#box").toggle("drop", {direction: "up"}, 400);
});
Here's a link to the fiddle.
If I remove the box-sizing property, the animation works perfectly.
Does anyone have any insight into what might be causing this issue and possible solutions?