Change Youtube channel transition to avoid rendering bug

2 files changed, 11 insertions, 7 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 50286c22..a405fc7c 100644
--- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html
+++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html
@@ -58,9 +58,15 @@
             height: 90px;
             width: 120px;
             background-color: #000;
+            opacity: 1;
+
+            -webkit-transition: opacity 0.5s ease-in-out;
+        }
+        .montage-youtube-channel.show img {
+            opacity: 0;
         }
 
-        .montage-youtube-channel-popup {
+        .montage-youtube-channel .montage-youtube-channel-popup {
             width: 640px;
             border: 5px solid #000;
             border-radius: 5px;
@@ -74,13 +80,11 @@
 
             z-index: 9000;
 
-            -webkit-transform: scale3d(0, 0, 1);
             opacity: 0;
-            -webkit-transition: all 0.5s ease-in-out;
             visibility: hidden;
+            -webkit-transition: all 0.5s ease-in-out;
         }
-        .montage-youtube-channel-popup.show {
-            -webkit-transform: scale3d(1, 1, 1);
+        .montage-youtube-channel.show .montage-youtube-channel-popup {
             opacity: 1;
             visibility: visible;
         }
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 3d9f7f2f..ccbd9978 100644
--- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js
+++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js
@@ -133,7 +133,7 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
             }
 
             if (this._shouldShowPopup) {
-                this._popupElement.classList.add("show");
+                this._element.classList.add("show");
                 if (window.Touch) {
                     document.addEventListener('touchstart', this, false);
                 } else {
@@ -141,7 +141,7 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
                     document.addEventListener('keyup', this, false);
                 }
             } else {
-                this._popupElement.classList.remove("show");
+                this._element.classList.remove("show");
                 this.player.stop();
 
                 if (window.Touch) {