I've encountered an issue with implementing a scroll effect in Firefox. The code works perfectly fine in Chrome, Safari, and Opera, but for some reason, it's not functioning properly in Firefox. I have carefully reviewed the '-moz-transform' line of code and it appears to be correct.
When inspecting the code in the Firefox browser, it only displays the following:
element {
transform: rotate(0deg);
}
The rotation value stays at zero, and as someone who is still relatively new to jQuery, I'm unsure how to proceed with debugging from here. Below is my code snippet:
$(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)'
});
});