2 files changed, 11 insertions, 2 deletions

diff --git a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html
index f40ccadb..848322e0 100644
--- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html
+++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html
@@ -84,11 +84,13 @@
 
             opacity: 0;
             visibility: hidden;
+            -webkit-transform: scale3d(0, 0, 1);
             -webkit-transition: all 0.5s ease-in-out;
         }
         .montage-youtube-channel-popup.show {
             opacity: 1;
             visibility: visible;
+            -webkit-transform: scale3d(1, 1, 1);
         }
 
         .montage-youtube-channel-close {
diff --git a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js
index 6cd43a3c..30920953 100644
--- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js
+++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js
@@ -136,8 +136,15 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
 
             if (this._shouldShowPopup) {
                 this._positionPopup();
-                this._element.classList.add("show");
-                this._popupElement.classList.add("show");
+
+                // Fix for Canary where the thumbnail in the video doesn't
+                // change until the CSS transition has finished, so wait for
+                // it to change before starting the animation
+                var self = this;
+                window.setTimeout(function() {
+                    self._element.classList.add("show");
+                    self._popupElement.classList.add("show");
+                }, 50);
                 if (window.Touch) {
                     document.addEventListener('touchstart', this, false);
                 } else {