Transform not working in firefox with jQuery scroll effect

Question

I am having problems getting a scroll effect to work in Firefox, I have it working fine in Chrome, Safari and Opera with this code, I can't see what is wrong with the '-moz-transform' line of code.

I have checked in the Firefox browser and it just shows the following

element {
    transform: rotate(0deg);
}

The rotate value remains at zero, I am fairly new to jQuery and I am not sure how to debug from here. Please see my code below:

$(window).scroll(function(){


    var $cog = $('#my-div'),
        $body = $(document.body),
        bodyHeight = $body.height();

    $cog.css({
        'transform': 'rotate(' + ($body.scrollTop() / bodyHeight * -360) + 'deg)',
        '-moz-transform': 'rotate(' + ($body.scrollTop() / bodyHeight * -360) + 'deg)',
        '-webkit-transform': 'rotate(' + ($body.scrollTop() / bodyHeight * -360) + 'deg)',
        '-o-transform': 'rotate(' + ($body.scrollTop() / bodyHeight * -360) + 'deg)'
    });

});

Strange, `$('body').scrollTop()` reports `0` in __Firefox 47__. In _Chrome_ and _Edge_ it reports correct value. Could this be the issue? A bug report to jQuery guys would be in order. — beerwin, Jul 12 '16 at 12:56
Thanks will report this, could you explain how you viewed this in firebug so I can test better myself please — , Jul 12 '16 at 13:38
open your page and make sure jQuery is loaded. Scroll down on your page and open firebug. In the console enter `$('body').scrollTop()` — beerwin, Jul 12 '16 at 14:01

score 1 · Accepted Answer · edited May 23 '17 at 11:51

Please use this and let me know in case of any issue.

$(window).on('scroll', function() {

  var cog = $('div'),
    body = $(document),
    bodyHeight = body.height();

  cog.css({
    'transform': 'rotate(' + (body.scrollTop() / bodyHeight * -360) + 'deg)',
    '-o-transform': 'rotate(' + (body.scrollTop() / bodyHeight * -360) + 'deg)',
    '-moz-transform': 'rotate(' + (body.scrollTop() / bodyHeight * -360) + 'deg)',
    '-webkit-transform': 'rotate(' + (body.scrollTop() / bodyHeight * -360) + 'deg)',
  });

});

body {
  min-height: 900px;
}
div {
  transform: rotate(0deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  rotate this
</div>

The usual reason document.body is null is because you're executing script before the tag(*) has been encountered. Without seeing code I can't say for sure, but that'd be the usual reason. Move where you've put the scripts.

Please visit this question for detailed information.

Why is document.body == null in Firefox but not Safari

Transform not working in firefox with jQuery scroll effect

1 Answers1