Fix mobile iframe scrolling

jet/static/jet/css/_relatedpopup.scss

@@ -9,19 +9,24 @@
   bottom: 0;
   left: 0;
   z-index: 4;
-  border: 0;
-  width: 100%;
-  height: 100%;
   padding-left: 250px;
   box-sizing: border-box;
   display: none;
   background: $background-color;
   background-clip: content-box;
+  -webkit-overflow-scrolling: touch;
+  overflow-y: scroll;
 
   @include for-mobile {
     padding-left: 0;
   }
 
+  iframe {
+    border: 0;
+    width: 100%;
+    height: 100%;
+  }
+
   &-container {
     display: none;
     background-color: transparentize($sidebar-popup-overlay-color, 0.5);

jet/static/jet/js/src/features/related-popups.js

@@ -84,15 +84,17 @@ RelatedPopups.prototype = {
         var $container = $document.find('.related-popup-container');
         var $loading = $container.find('.loading-indicator');
         var $body = $document.find('body').addClass('non-scrollable');
-        var $popup = $('<iframe>')
+        var $iframe = $('<iframe>')
             .attr('src', href)
-            .data('input', $input)
-            .addClass('related-popup')
             .on('load', function() {
                 $popup.add($document.find('.related-popup-back')).fadeIn(200, 'swing', function() {
                     $loading.hide();
                 });
             });
+        var $popup = $('<div>')
+            .addClass('related-popup')
+            .data('input', $input)
+            .append($iframe);
 
         $loading.show();
         $container.fadeIn(200, 'swing', function() {