diff --git a/administrator/templates/isis/css/template.css b/administrator/templates/isis/css/template.css
index b42dcb9b02d7a..70c598b33bf2f 100644
--- a/administrator/templates/isis/css/template.css
+++ b/administrator/templates/isis/css/template.css
@@ -8191,12 +8191,3 @@ body.modal-open {
 .js-pstats-data-details dt {
 	width: 220px;
 }
-@media (max-width: 767px) {
-	.field-media-wrapper .modal .modal-body {
-		padding: 5px 0;
-	}
-}
-.modal-body {
-	-webkit-overflow-scrolling: touch;
-	overflow-y: auto !important;
-}
diff --git a/administrator/templates/isis/less/template.less b/administrator/templates/isis/less/template.less
index 5872bb9c04461..8ba2cb48ab615 100644
--- a/administrator/templates/isis/less/template.less
+++ b/administrator/templates/isis/less/template.less
@@ -1342,16 +1342,3 @@ body.modal-open {
 .js-pstats-data-details dt {
 	width: 220px;
 }
-
-/* Corrects the media modal padding on small devices */
-@media (max-width: 767px) {
-	.field-media-wrapper .modal .modal-body {
-		padding: 5px 0;
-	}
-}
-
-/* Fix iOS scrolling inside bootstrap modals (using iframe) */
-.modal-body {
-	-webkit-overflow-scrolling: touch;
-	overflow-y: auto !important;
-}
diff --git a/layouts/joomla/modal/main.php b/layouts/joomla/modal/main.php
index 771d6414cf9d1..fb84a78511f60 100644
--- a/layouts/joomla/modal/main.php
+++ b/layouts/joomla/modal/main.php
@@ -58,21 +58,37 @@
  * $('body').removeClass('modal-open')
  *
  * Scrolling inside bootstrap modals on small screens (adapt to window viewport and avoid modal off screen).
- * - max-height on .modal-body  if param height is set but too high for the window viewport height.
- *                              (147 = modal-header height + modal-footer height + 20px padding top and bottom)
- * - max-height on .iframe      max-height of the modal-body (deducting the 1% of the padding of the modal-body class)
+ *      - max-height    .modal-body     Max-height for the modal body
+ *                                      When height of the modal is too high for the window viewport height.
+ *      - max-height    .iframe         Max-height for the iframe (Deducting the padding of the modal-body)
+ *                                      When url option is set and height of the iframe is higher than max-height of the modal body.
+ *
+ * Fix iOS scrolling inside bootstrap modals
+ *      - overflow-y    .modal-body     When max-height is set for modal-body
  *
  * Specific hack for Bootstrap 2.3.x
  */
 $script[] = "jQuery(document).ready(function($) {";
-$script[] = "   $('#" . $selector . "').on('show', function() {";
-
-// Set max-height on modal-body.
-$script[] = "       var modalBodyHeight = $(window).height()-147;";
-$script[] = "       $('.modal-body').css('max-height', modalBodyHeight);";
+$script[] = "   $('#" . $selector . "').on('shown.bs.modal', function() {";
 
 $script[] = "       $('body').addClass('modal-open');";
 
+// Get height of the modal elements.
+$script[] = "       var modalHeaderHeight = $('div.modal-header:visible').outerHeight(true);";
+$script[] = "       var modalBodyHeightOuter = $('div.modal-body:visible').outerHeight(true);";
+$script[] = "       var modalBodyHeight = $('div.modal-body:visible').height();";
+$script[] = "       var modalFooterHeight = $('div.modal-footer:visible').outerHeight(true);";
+
+// Get padding top (jQuery position().top not working on iOS devices and webkit browsers, so use of Javascript instead)
+$script[] = "       var padding = document.getElementById('" . $selector . "').offsetTop;";
+
+// Calculate max-height of the modal, adapted to window viewport height.
+$script[] = "       var maxModalHeight = ($(window).height()-(padding*2));";
+
+// Calculate max-height for modal-body.
+$script[] = "       var modalBodyPadding = (modalBodyHeightOuter-modalBodyHeight);";
+$script[] = "       var maxModalBodyHeight = maxModalHeight-(modalHeaderHeight+modalFooterHeight+modalBodyPadding);";
+
 if (isset($params['url']))
 {
 	$iframeHtml = JLayoutHelper::render('joomla.modal.iframe', $displayData);
@@ -82,12 +98,24 @@
 	$script[] = "       modalBody.find('iframe').remove();";
 	$script[] = "       modalBody.prepend('" . trim($iframeHtml) . "');";
 
-	// Set max-height for iframe.
-	$script[] = "       $('.iframe').css('max-height', modalBodyHeight*0.98);";
+	// Set max-height for iframe if needed, to adapt to viewport height.
+	$script[] = "       var iframeHeight = $('.iframe').height();";
+	$script[] = "       if (iframeHeight > maxModalBodyHeight){;";
+	$script[] = "           $('.modal-body').css({'max-height': maxModalBodyHeight, 'overflow-y': 'auto'});";
+	$script[] = "           $('.iframe').css('max-height', maxModalBodyHeight-modalBodyPadding);";
+	$script[] = "       }";
+}
+else
+{
+	// Set max-height for modal-body if needed, to adapt to viewport height.
+	$script[] = "       if (modalBodyHeight > maxModalBodyHeight){;";
+	$script[] = "           $('.modal-body').css({'max-height': maxModalBodyHeight, 'overflow-y': 'auto'});";
+	$script[] = "       }";
 }
 
-$script[] = "   }).on('hide', function () {";
+$script[] = "   }).on('hide.bs.modal', function () {";
 $script[] = "       $('body').removeClass('modal-open');";
+$script[] = "       $('.modal-body').css({'max-height': 'initial', 'overflow-y': 'initial'});";
 $script[] = "   });";
 $script[] = "});";
 
diff --git a/templates/protostar/css/template.css b/templates/protostar/css/template.css
index cbc9db4da033c..faff51485553f 100644
--- a/templates/protostar/css/template.css
+++ b/templates/protostar/css/template.css
@@ -7521,12 +7521,3 @@ body.modal-open {
 .well .chzn-container {
 	max-width: 100%;
 }
-@media (max-width: 767px) {
-	.field-media-wrapper .modal .modal-body {
-		padding: 5px 0;
-	}
-}
-.modal-body {
-	-webkit-overflow-scrolling: touch;
-	overflow-y: auto !important;
-}
diff --git a/templates/protostar/less/template.less b/templates/protostar/less/template.less
index c1d9a09b40b8d..bea47807de730 100644
--- a/templates/protostar/less/template.less
+++ b/templates/protostar/less/template.less
@@ -652,16 +652,3 @@ body.modal-open {
 		max-width: 100%;
 	}
 }
-
-/* Corrects the media modal padding on small devices */
-@media (max-width: 767px) {
-	.field-media-wrapper .modal .modal-body {
-		padding: 5px 0;
-	}
-}
-
-/* Fix iOS scrolling inside bootstrap modals (using iframe) */
-.modal-body {
-	-webkit-overflow-scrolling: touch;
-	overflow-y: auto !important;
-}