JoeyDrupal JoeyDrupal - 1 year ago 104
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:


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

'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 Source

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

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

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

    '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=""></script>
  rotate this

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download