css jquery position fixed element on the right. animate BUG in Firefox

Question

I created a fiddle for my question:

fiddle

$('#move').click(function (e) {
    e.preventDefault();

    $(this).not('.up').animate({
        bottom: '50%'
    }, 1000, function () {
        $(this).addClass('up');
    });

    $('.up').animate({
        bottom: '0%'
    }, 1000, function () {
        $(this).removeClass('up');
    });
});

There is a bug in Firefox (my version: 19.0.2).

When you click the red button, it jumps to the right (distance has exactly the width of the scrollbar). when it is on the right and you resize the window (or fiddle-frame) it jumps back.

Am I doing anything wrong? Is there a good solution to fix it?

Answer 1

well if you change the width property then it works fine even on firefox

try this

change

width:100px 

to

min-width:100px;

Hope it helps.