diff --git a/core/modules/outside_in/css/outside_in.module.css b/core/modules/outside_in/css/outside_in.module.css
index 22f727e..744da0e 100644
--- a/core/modules/outside_in/css/outside_in.module.css
+++ b/core/modules/outside_in/css/outside_in.module.css
@@ -4,7 +4,7 @@
  */
 
 /* Position the offcanvas tray container outside the right of the viewport. */
-.ui-dialog-offcanvas {
+.ui-dialog.ui-dialog-offcanvas {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
@@ -16,49 +16,29 @@
   right: 0;
 }
 
-/* Position the button that closes the offcanvas tray. */
-.ui-dialog-offcanvas button.ui-dialog-titlebar-close .ui-button-icon-primary{
-  position: static;
-  float: right; /* LTR */
-  height: 52px;
-  width: 40px;
-  border: 0;
-  border-radius: 0;
-  background: url(../../../misc/icons/bebebe/ex.svg) center center no-repeat;
-  color: transparent;
-  cursor: pointer;
-  z-index: 501;
-}
-.ui-dialog-offcanvas button.ui-dialog-titlebar-close:focus .ui-button-icon-primary {
-  outline: none;
-}
-[dir="rtl"] .ui-dialog-offcanvas button.ui-dialog-titlebar-close .ui-button-icon-primary {
-  float: left;
-}
-
 /* Create a place to name the tray. */
-.ui-dialog-offcanvas h1 {
+.ui-dialog.ui-dialog-offcanvas h1 {
   padding: 15px 25% 15px 15px; /* LTR */
   margin-top: 0;
   margin-bottom: 0;
   font-size: 120%;
 }
-[dir="rtl"] .ui-dialog-offcanvas h1 {
+[dir="rtl"] .ui-dialog.ui-dialog-offcanvas h1 {
   text-align: right;
   padding-right: 0;
   padding-left: 25%;
 }
 
 /* Wrap the form that's inside the offcanvas tray. */
-.ui-dialog-offcanvas > .ui-dialog-content {
+.ui-dialog.ui-dialog-offcanvas > .ui-dialog-content {
   height: 10000px;
   padding: 0 15px;
 }
-[dir="rtl"] .ui-dialog-offcanvas .ui-dialog-content {
+[dir="rtl"] .ui-dialog.ui-dialog-offcanvas .ui-dialog-content {
   text-align: right;
 }
-.ui-dialog-offcanvas > .form-item,
-.ui-dialog-offcanvas > .form-item .form-item {
+.ui-dialog.ui-dialog-offcanvas > .form-item,
+.ui-dialog.ui-dialog-offcanvas > .form-item .form-item {
   width: 100%;
 }
 
@@ -74,7 +54,7 @@
 /* Media queries. */
 /* @todo Rework breakpoints: https://www.drupal.org/node/2784599. */
 @media (max-width: 700px) {
-  .ui-dialog-offcanvas {
+  .ui-dialog.ui-dialog-offcanvas {
     position: absolute;
     display: block;
     right: 0;
@@ -88,7 +68,7 @@
     display: inline-block;
     width: 100%;
   }
-  #main-canvas-wrapper.js-tray-open .ui-dialog-offcanvas {
+  #main-canvas-wrapper.js-tray-open .ui-dialog.ui-dialog-offcanvas {
     margin-right: 0;
     right: 0;
     top: 0;
@@ -100,7 +80,7 @@
 }
 @media (min-width: 700px) {
   /* Position the offcanvas tray container outside the right of the viewport. */
-  .ui-dialog-offcanvas {
+  .ui-dialog.ui-dialog-offcanvas {
     position: fixed;
     display: inline-block;
     width: 35%;
@@ -110,7 +90,7 @@
     -ms-transform: translateX(100%);
     transform: translateX(100%);
   }
-  [dir="rtl"] .ui-dialog-offcanvas {
+  [dir="rtl"] .ui-dialog.ui-dialog-offcanvas {
     text-align: right;
     -webkit-transform: translateX(-100%);
     -moz-transform: translateX(-100%);
@@ -124,7 +104,7 @@
     width: 100%;
   }
   /* Move the offcanvas tray on canvas. */
-  #main-canvas-wrapper.js-tray-open .ui-dialog-offcanvas {
+  #main-canvas-wrapper.js-tray-open .ui-dialog.ui-dialog-offcanvas {
     -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
     -o-transform: translateX(0);
@@ -138,7 +118,7 @@
 }
 @media (min-width: 900px) {
   /* Position the offcanvas tray container outside the right of the viewport. */
-  .ui-dialog-offcanvas {
+  .ui-dialog.ui-dialog-offcanvas {
     position: fixed;
     display: inline-block;
     width: 30%;
@@ -155,7 +135,7 @@
 }
 @media (min-width: 1000px) {
   /* Position the offcanvas tray container outside the right of the viewport. */
-  .ui-dialog-offcanvas {
+  .ui-dialog.ui-dialog-offcanvas {
     position: fixed;
     display: inline-block;
     width: 25%;
@@ -176,27 +156,27 @@
  * @todo Remove when more general form styling is done:
  *    https://www.drupal.org/node/2784437.
  */
-.ui-dialog-offcanvas td {
+.ui-dialog.ui-dialog-offcanvas td {
     width: auto;
 }
-.ui-dialog-offcanvas .menu-enabled {
+.ui-dialog.ui-dialog-offcanvas .menu-enabled {
     width: auto;
 }
-.ui-dialog-offcanvas table#menu-overview th {
+.ui-dialog.ui-dialog-offcanvas table#menu-overview th {
   display: none;
 }
-.ui-dialog-offcanvas table#menu-overview tr td:first-child {
+.ui-dialog.ui-dialog-offcanvas table#menu-overview tr td:first-child {
   min-width: 110px;
 }
-.ui-dialog-offcanvas details > .details-wrapper {
+.ui-dialog.ui-dialog-offcanvas details > .details-wrapper {
   padding: 5px;
   overflow: scroll;
 }
-.ui-dialog-offcanvas .tabledrag-toggle-weight {
+.ui-dialog.ui-dialog-offcanvas .tabledrag-toggle-weight {
   font-size: 80%;
 }
-.ui-dialog-offcanvas input:focus,
-.ui-dialog-offcanvas summary:focus {
+.ui-dialog.ui-dialog-offcanvas input:focus,
+.ui-dialog.ui-dialog-offcanvas summary:focus {
   outline: none;
   box-shadow: 2px 2px #ddd;
 }
diff --git a/core/modules/outside_in/css/outside_in.theme.css b/core/modules/outside_in/css/outside_in.theme.css
index 8c311b9..433a987 100644
--- a/core/modules/outside_in/css/outside_in.theme.css
+++ b/core/modules/outside_in/css/outside_in.theme.css
@@ -92,18 +92,18 @@ button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:be
  * @todo Move Off-canvas css into core Off-canvas library:
  *   https://www.drupal.org/node/2784443.
  */
-.ui-dialog-offcanvas {
+.ui-dialog.ui-dialog-offcanvas {
   background: #fff;
   border-left: 1px solid #ddd; /* LTR */
   box-shadow: -2px 2px 1px 1px rgba(0, 0, 0, 0.1); /* LTR */
 }
-[dir="rtl"] .ui-dialog-offcanvas {
+[dir="rtl"] .ui-dialog.ui-dialog-offcanvas {
   border-right: 1px solid #ddd;
   box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 /* Style the tray header. */
-.ui-dialog-offcanvas h1 {
+.ui-dialog.ui-dialog-offcanvas h1 {
   font-size: 120%;
   border-bottom: 1px solid #ddd;
 }
diff --git a/core/modules/outside_in/js/offcanvas.js b/core/modules/outside_in/js/offcanvas.js
index 7530783..8c73b2c 100644
--- a/core/modules/outside_in/js/offcanvas.js
+++ b/core/modules/outside_in/js/offcanvas.js
@@ -11,11 +11,12 @@
     var offsets = displace.offsets;
     var $element = event.data.$element;
     var $widget = $element.dialog('widget');
+    var edge = getEdge();
 
     var adjustedOptions = {
       position: {
-        my: 'right top',
-        at: 'right top' + (offsets.top !== 0 ? '+' + offsets.top : ''),
+        my: edge + ' top',
+        at: edge + ' top' + (offsets.top !== 0 ? '+' + offsets.top : ''),
         of: window
       }
     };
@@ -48,16 +49,27 @@
     $element.height(modalHeight - offset - scrollOffset);
   }
 
+  /**
+   * Determine on which screen edge the tray should appear.
+   *
+   * @returns {string}
+   *   'left' or 'right'
+   */
+  function getEdge() {
+    return (document.documentElement.dir === 'rtl') ? 'left' : 'right';
+  }
+
   function bodyPadding(event) {
+    var edge = getEdge();
     var $element = event.data.$element;
     var $widget = $element.dialog('widget');
     var $body = $('body');
 
     var width = $widget.outerWidth();
-    var bodyPadding = $body.css('padding-right');
+    var bodyPadding = $body.css('padding-' + edge);
     if (width !== bodyPadding) {
-      $body.css('padding-right', width + 'px');
-      $widget.attr('data-offset-right', width);
+      $body.css('padding-' + edge, width + 'px');
+      $widget.attr('data-offset-' + edge, width);
       displace();
     }
   }
@@ -73,7 +85,7 @@
           .on('dialogContentResize.outsidein', eventData, handleDialogResize)
           .trigger('dialogresize.outsidein');
 
-        $element.dialog('widget').attr('data-offset-right', '');
+        $element.dialog('widget').attr('data-offset-' + getEdge(), '');
 
         $(window)
           .on('resize.outsidein scroll.outsidein', eventData, debounce(resetSize, 100))
@@ -84,9 +96,10 @@
     },
     'dialog:beforecreate': function (event, dialog, $element, settings) {
       if ($element.is('#drupal-offcanvas')) {
+        var edge = getEdge();
         settings.position = {
           my: 'left top',
-          at: 'right top',
+          at: edge + ' top',
           of: window
         };
         settings.dialogClass = 'ui-dialog-offcanvas';
@@ -95,7 +108,7 @@
     'dialog:beforeclose': function (event, dialog, $element) {
       $(document).off('.outsidein');
       $(window).off('.outsidein');
-      $('body').css('padding-right', 0);
+      $('body').css('padding-' + getEdge(), 0);
     }
   });