diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts
index 3af80d25483..28ef0d2bd63 100644
--- a/public/app/features/panel/panel_directive.ts
+++ b/public/app/features/panel/panel_directive.ts
@@ -68,8 +68,8 @@ module.directive('grafanaPanel', function($rootScope) {
 
       // the reason for handling these classes this way is for performance
       // limit the watchers on panels etc
-      var transparentLastState;
-      var lastHasAlertRule;
+      var transparentLastState = false;
+      var lastHasAlertRule = false;
       var lastAlertState;
       var hasAlertRule;
       var lastHeight = 0;
@@ -91,6 +91,12 @@ module.directive('grafanaPanel', function($rootScope) {
         lastHeight = ctrl.containerHeight;
       }
 
+      // set initial transparency
+      if (ctrl.panel.transparent) {
+        transparentLastState = true;
+        panelContainer.addClass('panel-transparent', true);
+      }
+
       ctrl.events.on('render', () => {
         if (lastHeight !== ctrl.containerHeight) {
           panelContainer.css({minHeight: ctrl.containerHeight});