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.
Removing this from the css made it work:
-webkit-transform: translateZ(0px);