javascriptcssangularjschatsmooch

Smooch when closed, modified the bottom of my html page


This is how the page looks like in Chrome, when smooch is closed: https://s3.amazonaws.com/uploads.hipchat.com/39260/829560/ByURnsF2qd3laSO/upload.png As you can see. the bottom of the page is fixed, so I cannot move past that. But on Firefox, when the smooch chat dialog is closed, the page looks like this: https://s3.amazonaws.com/uploads.hipchat.com/39260/829560/BCrKoabYoWYjH0j/upload.png The chat windows being closed, should not be visible, but if I scroll down, it is there. If I open the chat, then the extra spacing disappears, and I cannot scroll the page down (it fixes the issue): https://s3.amazonaws.com/uploads.hipchat.com/39260/829560/5NraM0G864Qf1mU/upload.png

But this is only until I close it again, which will make it add the extra spacing, making the page scrollable. This is how I initiate smooch:

 $rootScope.smooch_inited = $rootScope.smooch_inited || false;
function initSmooch() {
    if (!$rootScope.smooch_inited) {
        try {
            $rootScope.smooch_inited = true;

            var window_focus = true;
            $(window).focus(function() {
                window_focus = true;
            }).blur(function() {
                window_focus = false;
            });

            Smooch.on('message:received', function() {
                if (!window_focus || !Smooch.isOpened()) {
                    //Play sound
                    var audio = new Audio('assets/audio/ding.wav');
                    audio.play();
                }
                Smooch.open();
            });
            var promise = Smooch.init({
                appToken: smooch_key,
                givenName: $rootScope.data.user.first_name,
                surname: $rootScope.data.user.last_name,
                properties: {
                    email: $rootScope.data.user.email,
                    uid: $rootScope.data.user.id,
                    language: $rootScope.data.user.language,
                    country: $rootScope.data.user.country
                }
            });
            promise.then(function() {
                $('#sk-holder').addClass('no-print');
            });
        } catch(e) {
            $timeout(function() {
                initSmooch();
            }, 1000);
        }
    }
}

This is how I inject the script:

    injectJS.set('smooch', 'https://cdn.smooch.io/smooch.min.js');

Is this fixable? PS: it works on Chrome and Safari, so far only Firefox has this issue.


Solution

  • Removing this from the css made it work: -webkit-transform: translateZ(0px);