Fix the black stripe (another try)

modules/UI/side_pannels/chat/Chat.js

@@ -315,7 +315,7 @@ var Chat = {
      * Indicates if the chat is currently visible.
      */
     isVisible () {
-        return $('#chatspace').is(":visible");
+        return UIUtil.isVisible(document.getElementById("chatspace"));
     },
     /**
      * Shows and hides the window with the smileys

modules/UI/side_pannels/contactlist/ContactList.js

@@ -1,6 +1,7 @@
 /* global $, APP */
 import Avatar from '../../avatar/Avatar';
 import UIEvents from '../../../../service/UI/UIEvents';
+import UIUtil from '../../util/UIUtil';
 
 let numberOfContacts = 0;
 let notificationInterval;
@@ -87,7 +88,7 @@ var ContactList = {
      * otherwise
      */
     isVisible () {
-        return $('#contactlist').is(":visible");
+        return UIUtil.isVisible(document.getElementById("contactlist"));
     },
 
     /**

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -161,7 +161,7 @@ export default {
      * @returns {boolean}
      */
     isVisible () {
-        return $('#settingsmenu').is(':visible');
+        return UIUtil.isVisible(document.getElementById("settingsmenu"));
     },
 
     /**

modules/UI/util/UIUtil.js

@@ -155,6 +155,17 @@
          return Object.keys(attrs).map(
              key => ` ${key}="${attrs[key]}"`
          ).join(' ');
+     },
+
+    /**
+     * Checks if the given DOM element is currently visible. The offsetParent
+     * will be null if the "display" property of the element or any of its
+     * parent containers is set to "none". This method will NOT check the
+     * visibility property though.
+     * @param {el} The DOM element we'd like to check for visibility
+     */
+    isVisible(el) {
+        return (el.offsetParent !== null);
     }
 };