diff --git a/web/gui/src/main/webapp/app/fw/util/fn.js b/web/gui/src/main/webapp/app/fw/util/fn.js
index 6fee2bf..defb845 100644
--- a/web/gui/src/main/webapp/app/fw/util/fn.js
+++ b/web/gui/src/main/webapp/app/fw/util/fn.js
@@ -122,6 +122,28 @@
         return patt.test(ua);
     }
 
+    // Returns true if the current browser determined to be Chrome
+    function isChrome() {
+        var isChromium = $window.chrome,
+            vendorName = $window.navigator.vendor,
+            isOpera = $window.navigator.userAgent.indexOf("OPR") > -1;
+        return (isChromium !== null &&
+        isChromium !== undefined &&
+        vendorName === "Google Inc." &&
+        isOpera == false);
+    }
+
+    // Returns true if the current browser determined to be Safari
+    function isSafari() {
+        return ($window.navigator.userAgent.indexOf('Safari') !== -1 &&
+        $window.navigator.userAgent.indexOf('Chrome') === -1);
+    }
+
+    // Returns true if the current browser determined to be Firefox
+    function isFirefox() {
+        return typeof InstallTrigger !== 'undefined';
+    }
+
     // search through an array of objects, looking for the one with the
     // tagged property matching the given key. tag defaults to 'id'.
     // returns the index of the matching object, or -1 for no match.
@@ -249,6 +271,9 @@
                 areFunctionsNonStrict: areFunctionsNonStrict,
                 windowSize: windowSize,
                 isMobile: isMobile,
+                isChrome: isChrome,
+                isSafari: isSafari,
+                isFirefox: isFirefox,
                 debugOn: debugOn,
                 find: find,
                 inArray: inArray,
diff --git a/web/gui/src/main/webapp/app/view/device/device.js b/web/gui/src/main/webapp/app/view/device/device.js
index d376fe9..7a2dc4f 100644
--- a/web/gui/src/main/webapp/app/view/device/device.js
+++ b/web/gui/src/main/webapp/app/view/device/device.js
@@ -251,8 +251,9 @@
             $log.log('OvDeviceCtrl has been created');
         }])
 
-    .directive('deviceDetailsPanel', ['$rootScope', '$window', 'KeyService',
-    function ($rootScope, $window, ks) {
+    .directive('deviceDetailsPanel',
+    ['$rootScope', '$window', '$timeout', 'KeyService',
+    function ($rootScope, $window, $timeout, ks) {
         return function (scope) {
             var unbindWatch;
 
@@ -262,10 +263,19 @@
                 wSize = fs.windowSize(pStartY);
                 pHeight = wSize.height;
             }
-            heightCalc();
 
-            createDetailsPane();
+            function initPanel() {
+                heightCalc();
+                createDetailsPane();
+            }
 
+            // Safari has a bug where it renders the fixed-layout table wrong
+            // if you ask for the window's size too early
+            if (scope.onos.browser === 'safari') {
+                $timeout(initPanel);
+            } else {
+                initPanel();
+            }
             // create key bindings to handle panel
             ks.keyBindings({
                 esc: [closePanel, 'Close the details panel'],
@@ -276,6 +286,7 @@
                 ['scroll down', 'See more devices']
             ]);
 
+            // if the panelData changes
             scope.$watch('panelData', function () {
                 if (!fs.isEmptyObject(scope.panelData)) {
                     populateDetails(scope.panelData);
@@ -283,6 +294,7 @@
                 }
             });
 
+            // if the window size changes
             unbindWatch = $rootScope.$watchCollection(
                 function () {
                     return {