diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index 1e896a9c5..c158c037a 100644
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -1500,23 +1500,40 @@ MessageTray.prototype = {
 
     _updateShowingNotification: function() {
         Tweener.removeTweens(this._notificationBin);
-        this._tween(this._notificationBin, '_notificationState', State.SHOWN,
-                    { y: 0,
-                      opacity: 255,
-                      time: ANIMATION_TIME,
-                      transition: 'easeOutQuad',
-                      onComplete: this._showNotificationCompleted,
-                      onCompleteScope: this
-                    });
 
         // We auto-expand notifications with CRITICAL urgency.
-        // We call _expandNotification() again on the notifications that
-        // are expanded in case they were in the process of hiding and need
-        // to re-expand.
+        // We use Tweener.removeTweens() to remove a tween that was hiding the notification we are
+        // updating, in case that notification was in the process of being hidden. However,
+        // Tweener.removeTweens() would also remove a tween that was updating the position of the
+        // notification we are updating, in case that notification was already expanded and its height
+        // changed. Therefore we need to call this._expandNotification() for expanded notifications
+        // to make sure their position is updated.
         if (this._notification.urgency == Urgency.CRITICAL || this._notification.expanded)
-            // This will overwrite the y tween, but leave the opacity
-            // tween, and so the onComplete will remain as well.
             this._expandNotification(true);
+
+        // We tween all notifications to full opacity. This ensures that both new notifications and
+        // notifications that might have been in the process of hiding get full opacity.
+        //
+        // We tween any notification showing in the banner mode to banner height (this._notificationBin.y = 0).
+        // This ensures that both new notifications and notifications in the banner mode that might
+        // have been in the process of hiding are shown with the banner height.
+        //
+        // We use this._showNotificationCompleted() onComplete callback to extend the time the updated
+        // notification is being shown.
+        //
+        // We don't set the y parameter for the tween for expanded notifications because
+        // this._expandNotification() will result in getting this._notificationBin.y set to the appropriate
+        // fully expanded value.
+        let tweenParams = { opacity: 255,
+                            time: ANIMATION_TIME,
+                            transition: 'easeOutQuad',
+                            onComplete: this._showNotificationCompleted,
+                            onCompleteScope: this
+                          };
+        if (!this._notification.expanded)
+            tweenParams.y = 0;
+
+        this._tween(this._notificationBin, '_notificationState', State.SHOWN, tweenParams);
    },
 
     _showNotificationCompleted: function() {