JoeyDrupal JoeyDrupal - 4 months ago 12
CSS Question

Transform not working in firefox with jQuery scroll effect

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)'
});

});

Answer

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