Fix for bouncing sidecar's gap

client/less/map.less

@@ -11,23 +11,18 @@
     bottom: 0;
     right: 0;
 
-    overflow-x: hidden;
-    overflow-y: scroll;
-    -webkit-overflow-scrolling: touch;
-
     display: -webkit-flex;
     display: flex;
     -webkit-flex-direction: row;
     flex-direction: row;
-
     background-color: @body-bg;
     border-left: 1px solid #ddd;
     box-shadow: -12px 0 18px 0 rgba(50, 50, 50, 0.1);
 
     transition: transform 0.3s cubic-bezier(0.16, 0.22, 0.22, 1.7);
 
-    &.is-collapsed {
-      -webkit-transform: translateY(110%);
+    &.is-collapsed:not(.is-loading) {
+      -webkit-transform: translateX(110%);
       transform: translateX(110%);
     }
 
@@ -45,14 +40,18 @@
 
       background-color: @body-bg;
     }
-
-    & > iframe {
-      flex: 1;
-      width: 100%;
-      height: 100%;
-      border: 0;
-      overflow: scroll;
+    .iframeWrapper {
+      height:100%;
+      width:100%;
+      overflow-x: hidden;
+      overflow-y: scroll;
       -webkit-overflow-scrolling: touch;
+      iframe {
+        flex: 1;
+        width: 100%;
+        height: 100%;
+        border: 0;
+      }
     }
 }
 

client/less/wiki.less

@@ -50,13 +50,18 @@
       background-color: @body-bg;
     }
 
-    & > iframe {
-      flex: 1;
-      width: 100%;
-      height: 100%;
-      border: 0;
-      overflow: scroll;
+    .iframeWrapper {
+      height:100%;
+      width:100%;
+      overflow-x: hidden;
+      overflow-y: scroll;
       -webkit-overflow-scrolling: touch;
+      iframe {
+        flex: 1;
+        width: 100%;
+        height: 100%;
+        border: 0;
+      }
     }
 }
 

client/main.js

@@ -355,8 +355,11 @@ $(document).ready(function() {
   function showMap() {
     if (!main.isMapAsideLoad) {
       var mapAside = $('<iframe>');
-      mapAside.attr('src', '/map-aside');
-      $('.map-aside').append(mapAside);
+      mapAside.attr({
+        src: '/map-aside',
+        scrolling: 'yes'
+      });   
+      $('.map-aside .iframeWrapper').append(mapAside);
       main.isMapAsideLoad = true;
     }
     $('.map-aside').removeClass('is-collapsed');
@@ -369,7 +372,6 @@ $(document).ready(function() {
 
   function toggleMap() {
     var isCollapsed = $('.map-aside').hasClass('is-collapsed');
-
     if (isCollapsed) {
       showMap();
     } else {
@@ -387,8 +389,11 @@ $(document).ready(function() {
       lang = (lang) ? lang[0] : '/en/';
       var wikiURL = 'http://freecodecamp.github.io/wiki' + lang;
       var wikiAside = $('<iframe>');
-      wikiAside.attr('src', wikiURL);
-      $('.wiki-aside').append(wikiAside);
+      wikiAside.attr({
+        src: wikiURL,
+        scrolling: 'yes'
+      });
+      $('.wiki-aside .iframeWrapper').append(wikiAside);
       main.isWikiAsideLoad = true;
     }
     $('.wiki-aside').removeClass('is-collapsed');

server/views/partials/footer.jade

@@ -4,7 +4,9 @@ aside.map-aside.is-collapsed
   .map-aside-action-bar
       a.map-aside-action-item.map-aside-action-pop-out(href='/map' target='_blank' aria-label='open map in new tab')
       button.map-aside-action-item.map-aside-action-collapse(aria-label='close map aside')
+  .iframeWrapper
 aside.wiki-aside.is-collapsed
-    .wiki-aside-action-bar
-        a.wiki-aside-action-item.wiki-aside-action-pop-out(href='/wiki' target='_blank' aria-label='open wiki in new tab')
-        button.wiki-aside-action-item.wiki-aside-action-collapse(aria-label='close wiki aside')
+  .wiki-aside-action-bar
+      a.wiki-aside-action-item.wiki-aside-action-pop-out(href='/wiki' target='_blank' aria-label='open wiki in new tab')
+      button.wiki-aside-action-item.wiki-aside-action-collapse(aria-label='close wiki aside')
+  .iframeWrapper

server/views/wiki/show.jade

@@ -1,5 +1,6 @@
 extends ../layout-wide
 block content
+  .iframeWrapper
     iframe#wikiFrame(frameborder='no')
     script.
         var lang = window.location.toString().match(/\/\w{2}\//);