Inconsistent behaviour between css and jQuery regarding scrollbar and right:0px in Firefox

Question

I have this fiddle which if you look at it in Chrome or IE works fine. You just click on the orange box and the box slides out, and click again and it returns to it's exact original position.

However if you look at it in Firefox ( make sure the scrollbar is showing in the bottom right frame) then the CSS which positions the box

right: -290px;

sets the position relative to the left edge of the scrollbar as I'd expect...

but the jQuery (note =-290px which should reset it to where it was on second click )

$('#slideClick').toggle(function() {
                $(this).parent().animate( { right: '0px' }, {queue:false, duration: 500});
            }, function() {
                $(this).parent().animate( { right: '-290px' }, {queue:false, duration: 500});
            });

sets the position relative to the right edge of the scrollbar, giving a 17px inconsistency.

Is this a known bug, or am I just mistaken somewhere. What is the workaround if it's a bug?

sareed · Answer 1 · 2013-05-16T00:57:26.107

This will work as well. I have had a similar problem and it was that firefox deals with the scroll bar differently. This solution is not supposed to work with JQuery 1.9 and later. You are supposed to use feature detection now http://api.jquery.com/jQuery.support/ but I have not gotten into that yet. Hope this helps :)

    jQuery(function($) {
        $('#slideClick').toggle(function() {
            $(this).parent().animate( { right: '0px' }, {queue:false, duration: 500});
        }, function() {
            if ($.browser.mozilla && ($(document).height() > $(window).height()))
            {
                $(this).parent().animate({right: '-275px'},500);
            }
            else $(this).parent().animate( { right: '-290px' }, {queue:false, duration: 500});
        });
    });

score 1 · Accepted Answer · edited May 17 '13 at 12:38

Ended up fixing it like this ( detect if browser if FF and if scrollbar is visible - if so then add 17px right margin - not pretty but it works )

EDIT - added basic fiddle and updated fiddle that fixes element's position in a case where the browser window is eventually zoomed (or resized) by user.

    $('#slideClick').toggle(function() {
        $(this).parent().animate( { right: '0px' }, {queue:false, duration: 500});
    }, function() {
        $(this).parent().animate( { right: '-290px' }, {queue:false, duration: 500});

        // If UA is firefox and vert scrollbar present
        if ( ( navigator.userAgent.toLowerCase().indexOf('firefox') > -1 ) && ( $(document).height() > $(window).height() ) ) {
            $('#slideOut').css('margin-right', '17px');
        }
    });

@Stanto thanks do you want to make an answer out of that yourself? — byronyasgur, May 16 '13 at 15:48
thanks, no I just put an edit so people could see your fiddle ... thanks. Will accept this answer tomorrow. — byronyasgur, May 16 '13 at 23:38

score 0 · Answer 3 · edited May 23 '17 at 10:25

0

Might be related to this question and how firefox handles the scrollbar width differently than webkit

edited May 23 '17 at 10:25

Community

1
1

answered May 16 '13 at 00:05

Duncan Beattie

2,306
17
17

thanks ... I had a look ... maybe I'm wrong but I think they're different issues, maybe related or something. This seems to be something to do with jQuery. – byronyasgur May 16 '13 at 00:11

Inconsistent behaviour between css and jQuery regarding scrollbar and right:0px in Firefox

3 Answers3