Firefox Background Issue

[Frisbetarian]

I'm tweening the sign-in and register forms on this website Qi. What basically happens is when you click on Sign-In in the navbar, the sign-in form animates in from the top. Its working fine in Chrome and IE but for some reason, the background color of the div dissapears in FF leaving only a section where there is padding colored.

Here is what im using to drop the form down and skew it:

            TweenMax.to($(".signIn"), 0.5, {top:"85px",scaleY:1.0,delay:0,ease:Quart.easeOut});
            TweenMax.from($(".signIn"), 0.5, {skewX:-10, skewY:20,delay:0,ease:Quart.easeOut});

 

I noticed that the scaling and skewing is whats causing the background color to disappear. Any hint as to what could be wrong is appreciated. My guess is that I havent defined orientation in the stylesheet for that particular div?

[Jonathan]

hello and welcome to the forums

 

this seems like a css / javascript issue than a GSAP bug

 

when i go to that page in Firefox and click the sign-in in the nav bar .. the console throws this error.

TypeError: $target.offset(...) is undefined
http://polypodhub.com/qi/js/jquery-1.10.2.min.js
Line 5

you might want to check $target in your code and make sure its not undefined.. you could try to console.log() the position of the offset and see what it outputs..

 

also im seeing in the inline style of the sign-in and register div a display property without a value:

<div class="signIn menuFont" style="display:;">

do you notice how the value is missing

 

im actually unable to even see the background behavior due to the TypeError above and below, stopping the scripts

TypeError: $target.offset(...) is undefined
http://polypodhub.com/qi/masterpage.php
Line 863

// issue is with this bit of code line 863
'scrollTop': $target.offset().top,

chrome outputs the same error.. try outputting in the console to track down if its getting the offset() so you can see if you get the offset top and left

$('a[href^="#"]').on('click', function (e) {
    e.preventDefault();
    scrolling = true;
    var target = this.hash,
        $target = $(target);

    // output the values to the console to see what they are
    if(window.console) {
        console.log($target);
        console.log("offset top: " + $target.offset().top);
        console.log("offset left: " + $target.offset().left);
    }
   
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top, // error line
        'scrollLeft': $target.offset().left // error line
    }, 1500, 'easeOutExpo', function () {
        window.location.hash = target;
        scrolling = false;
    });
});

try that code and see what it outputs in the console.. and see if its not outputting undefined

 

Chrome actually also outputs the same errors, but allows the sign-in box to slide down, but wont let you close the sign in box

 

Chrome is also throwing this error for a script not being found

GET http://polypodhub.com/qi/js/jquery-1.10.2.min.map 404 (Not Found) 

the file ends with .map and not .js

[Frisbetarian]

Thanks for the quick reply and for pointing out where I've gone wrong. I have fixed some of the issues and believe that the script error that was appearing should be no more. Weird thing is that
 

TypeError: $target.offset(...) is undefined
http://polypodhub.com/qi/js/jquery-1.10.2.min.js
Line 5

Is not getting logged for me. I wasn't aware of it until you pointed it out. I am trying out FF's and Chrome's consoles and getting zilch. In any case, I think I fixed what was causing that undefined target to appear. Are you now able to see what is happening to the background color in FF?

[Jonathan]

ok cool.. try adding a height value to line 513 in your stylesheet for .signIn rule. It is set to auto, and since your div is absolutely positioned, its best to always set a width and height since it is out of the document flow.

 

Try like height: 130px;
 

// you have this - line 513
.signIn {
    height: auto;
}

// try ading this - line 513
.signIn {
    height: 130px;
}

Also your head tag is missing the meta charset tag.. since i am seeing a html error thrown as well:

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.

try adding the below tag right after the beginning head tag,

<!DOCTYPE html>
<html>
<head>
    <!-- add this below beginning head tag -->
    <meta charset="utf-8">
    <!-- add this below beginning head tag -->

    <title>Qi</title>
    <link rel="stylesheet" type="text/css" href="css/fonts.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
....
</body>
</html>

you can try to install Firebug extension for Firefox to help with debugging..

 

also when using Chromes inspector, and when you have the console tab selected .. make sure the bottom sub-tab is set to All

 

i also noticed the close button 'x' doesnt work

 

i hope this helps!

[Carl]

Hi and welcome to the GreenSock forums.

 

Nice site you are working on. Very cool.

 

Not sure what the FF issue is at the moment but you could take 2 steps towards making it easier for us to assist you:

 

1: Use an updated version of GSAP. It appears you are using 1.9.7

 

2: Create a codepen or jsfiddle demo with just enough code to replicate the error.

 

It makes it much easier for us to test our assumptions when we can change the code in question.

 

-carl

 

ps. Nice work, Jonathan!

[Frisbetarian]

ok cool.. try adding a height value to line 513 in your stylesheet for .signIn rule. It is set to auto, and since your div is absolutely positioned, its best to always set a width and height since it is out of the document flow.

 

Try like height: 130px;

 

// you have this - line 513
.signIn {
    height: auto;
}

// try ading this - line 513
.signIn {
    height: 130px;
}

Also your head tag is missing the meta charset tag.. since i am seeing a html error thrown as well:

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.

try adding the below tag right after the beginning head tag,

<!DOCTYPE html>
<html>
<head>
    <!-- add this below beginning head tag -->
    <meta charset="utf-8">
    <!-- add this below beginning head tag -->

    <title>Qi</title>
    <link rel="stylesheet" type="text/css" href="css/fonts.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
....
</body>
</html>

you can try to install Firebug extension for Firefox to help with debugging..

 

also when using Chromes inspector, and when you have the console tab selected .. make sure the bottom sub-tab is set to All

 

i also noticed the close button 'x' doesnt work

 

i hope this helps!

Apologies for the late reply. Your suggestion to set a height value to signIn did the trick, much appreciated.