diff --git a/core/modules/outside_in/css/outside_in.module.css b/core/modules/outside_in/css/outside_in.module.css
index 984b1c04d66aff281e3e6ab9e7930c1b062aec64..a084979741f3fea4747af19fe9a23d6cfddcceb7 100644
--- a/core/modules/outside_in/css/outside_in.module.css
+++ b/core/modules/outside_in/css/outside_in.module.css
@@ -80,3 +80,11 @@
   box-shadow: 2px 2px #ddd;
 }
 
+.offcanvas-lining {
+  background: #fff;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  z-index: -1;
+}
diff --git a/core/modules/outside_in/js/offcanvas.js b/core/modules/outside_in/js/offcanvas.js
index a83555d1cff53c8f8ed970a0350897e94be6deb2..b3c4237e4f411a689a3974f104a780a1335b2c44 100644
--- a/core/modules/outside_in/js/offcanvas.js
+++ b/core/modules/outside_in/js/offcanvas.js
@@ -18,6 +18,8 @@
    */
   var edge = document.documentElement.dir === 'rtl' ? 'left' : 'right';
 
+  var $mainCanvasWrapper = $('#main-canvas-wrapper');
+
   /**
    * Resets the size of the dialog.
    *
@@ -81,12 +83,11 @@
   function bodyPadding(event) {
     var $element = event.data.$element;
     var $widget = $element.dialog('widget');
-    var $body = $('body');
 
     var width = $widget.outerWidth();
-    var bodyPadding = $body.css('padding-' + edge);
-    if (width !== bodyPadding) {
-      $body.css('padding-' + edge, width + 'px');
+    var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + edge);
+    if (width !== mainCanvasPadding) {
+      $mainCanvasWrapper.css('padding-' + edge, width + 'px');
       $widget.attr('data-offset-' + edge, width);
       displace();
     }
@@ -125,7 +126,7 @@
       if ($element.is('#drupal-offcanvas')) {
         $(document).off('.outsidein');
         $(window).off('.outsidein');
-        $('body').css('padding-' + edge, 0);
+        $mainCanvasWrapper.css('padding-' + edge, 0);
       }
     }
   });
diff --git a/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php b/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php
index 73354ed26f04a8f0afe5fea4dffce18345ab61ef..8e7bf82501b1ec3d8084af2d68506c3d809260cb 100644
--- a/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php
+++ b/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php
@@ -49,6 +49,8 @@ public function render() {
       'settings' => $this->settings,
       'data' => $this->getRenderedContent(),
       'dialogOptions' => $this->dialogOptions,
+      'effect' => 'fade',
+      'speed' => 1000,
     ];
   }
 
diff --git a/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php b/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php
index 42c0ecfe8fd4a78cefaab6d0821ab9ed03a37d5b..48bceeb66f760dbb8f1ecdd1c823e34c5aac5405 100644
--- a/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php
+++ b/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php
@@ -46,6 +46,8 @@ public function testDialog() {
           'draggable' => FALSE,
           'drupalAutoButtons' => FALSE,
         ],
+      'effect' => 'fade',
+      'speed' => 1000,
     ];
 
     // Emulate going to the JS version of the page and check the JSON response.
diff --git a/core/modules/outside_in/templates/outside-in-page-wrapper.html.twig b/core/modules/outside_in/templates/outside-in-page-wrapper.html.twig
index 76ff5ce625dbd517a3a2536c03fc5b30844b6abc..1d1c50fc77095e71fad543ff9e044a5fb39c5ee9 100644
--- a/core/modules/outside_in/templates/outside-in-page-wrapper.html.twig
+++ b/core/modules/outside_in/templates/outside-in-page-wrapper.html.twig
@@ -18,5 +18,6 @@
         {{ children }}
       </div>
     </div>
+    <div class="offcanvas-lining"></div>
   {% endspaceless %}
 {% endif %}
diff --git a/core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php b/core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php
index eac1b0fcd591a242995c82120b9df269ba4903e6..fd860dc336abaabdae28048ab974f2cf381c8e55 100644
--- a/core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php
+++ b/core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php
@@ -31,6 +31,8 @@ public function testRender() {
         'draggable' => FALSE,
         'drupalAutoButtons' => FALSE,
       ],
+      'effect' => 'fade',
+      'speed' => 1000,
     ];
     $this->assertEquals($expected, $command->render());
   }