Remove logical properties compatibility styles for Safari 13

- update caniuse-db & browserslist
- resolves #8124

CHANGELOG.txt

@@ -10,6 +10,7 @@ Changelog
  * Add `full_url` to the API output of `ImageRenditionField` (Paarth Agarwal)
  * Fix issue where `ModelAdmin` index listings with export list enabled would show buttons with an incorrect layout (Josh Woodcock)
  * Use `InlinePanel`'s label when available for field comparison label (Sandil Ranasinghe)
+ * Drop support for Safari 13 by removing left/right positioning in favour of CSS logical properties (Thibaud Colas)
 
 
 3.0 (xx.xx.xxxx) - IN DEVELOPMENT

client/scss/components/_button.scss

@@ -93,9 +93,6 @@
       // iconfont
       font-size: 1rem;
       position: absolute;
-      // Remove once we drop support for Safari 14.
-      // stylelint-disable-next-line property-disallowed-list
-      left: 0;
       inset-inline-start: 0;
       top: 0;
       width: 2em;
@@ -120,9 +117,6 @@
       align-items: center;
       justify-content: center;
       position: absolute;
-      // Remove once we drop support for Safari 14.
-      // stylelint-disable-next-line property-disallowed-list
-      left: 0;
       inset-inline-start: 0;
       top: 0;
       width: 3em;
@@ -255,9 +249,6 @@
       // iconfont
       text-align: center;
       position: absolute;
-      // Remove once we drop support for Safari 14.
-      // stylelint-disable-next-line property-disallowed-list
-      left: 0;
       inset-inline-start: 0;
       margin: 0;
       line-height: 1em;
@@ -462,9 +453,6 @@ button.button.bicolor .icon-wrapper {
   &:before {
     font-size: 1rem;
     position: absolute;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: 0;
     inset-inline-start: 0;
     top: 0;
     width: 2em;
@@ -586,9 +574,6 @@ button {
   .controls {
     position: absolute;
     z-index: 1;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 1em;
     inset-inline-end: 1em;
     top: 1em;
     color: $color-white;

client/scss/components/_dropdown.legacy.scss

@@ -33,9 +33,6 @@
     position: absolute;
     overflow: hidden;
     top: 100%;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: -2000px;
     inset-inline-start: -2000px;
     z-index: 500;
     opacity: 0;
@@ -100,9 +97,6 @@
         // stylelint-disable-next-line max-nesting-depth
         &:before,
         &:after {
-          // Remove once we drop support for Safari 13.
-          // stylelint-disable-next-line property-disallowed-list
-          right: 1em;
           inset-inline-end: 1em;
         }
       }
@@ -129,9 +123,6 @@
 
     .kbd {
       position: absolute;
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      right: 1em;
       inset-inline-end: 1em;
       font-weight: 600;
       font-size: 0.8em;
@@ -142,9 +133,6 @@
   &.open ul {
     box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
     opacity: 1;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: 0;
     inset-inline-start: 0;
     display: block;
   }
@@ -176,9 +164,6 @@
     height: 100%;
     border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
     position: absolute;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 0;
     inset-inline-end: 0;
     padding: 0 0.5em;
     text-align: center;

client/scss/components/_footer.scss

@@ -120,9 +120,6 @@
       }
 
       .avatar {
-        // Remove once we drop support for Safari 13.
-        // stylelint-disable-next-line property-disallowed-list
-        left: auto;
         inset-inline-start: auto;
       }
     }

client/scss/components/_forms.scss

@@ -84,9 +84,6 @@
     border-radius: 0 6px 6px 0;
     z-index: 0;
     position: absolute;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 0;
     inset-inline-end: 0;
     top: 1px;
     bottom: 0;
@@ -204,16 +201,10 @@ label.required:after {
     }
 
     &:before {
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      left: 0.3em;
       inset-inline-start: 0.3em;
     }
 
     &:after {
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      right: 0.5em;
       inset-inline-end: 0.5em;
     }
   }
@@ -234,16 +225,10 @@ label.required:after {
       }
 
       &:before {
-        // Remove once we drop support for Safari 13.
-        // stylelint-disable-next-line property-disallowed-list
-        left: 0.5em;
         inset-inline-start: 0.5em;
       }
 
       &:after {
-        // Remove once we drop support for Safari 13.
-        // stylelint-disable-next-line property-disallowed-list
-        right: 0.5em;
         inset-inline-end: 0.5em;
       }
     }
@@ -485,23 +470,14 @@ li.inline:first-child {
     position: absolute;
     display: block;
     top: 0;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 0;
     inset-inline-end: 0;
     height: 100%;
     line-height: 100%;
 
     &--object {
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      right: 20px;
       inset-inline-end: 20px;
 
       @include media-breakpoint-up(lg) {
-        // Remove once we drop support for Safari 13.
-        // stylelint-disable-next-line property-disallowed-list
-        right: 350px;
         inset-inline-end: 350px;
       }
     }
@@ -516,15 +492,9 @@ li.inline:first-child {
       border-radius: 3px;
       position: absolute;
       top: 50%;
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      right: 0;
       inset-inline-end: 0;
 
       @include media-breakpoint-up(sm) {
-        // Remove once we drop support for Safari 13.
-        // stylelint-disable-next-line property-disallowed-list
-        right: 10px;
         inset-inline-end: 10px;
       }
 
@@ -533,9 +503,6 @@ li.inline:first-child {
         opacity: 0;
         pointer-events: none;
         transform: translateY(-50%);
-        // Remove once we drop support for Safari 13.
-        // stylelint-disable-next-line property-disallowed-list
-        right: 0;
         inset-inline-end: 0;
       }
 
@@ -603,9 +570,6 @@ li.inline:first-child {
 
   .object.model_choice_field {
     .object-help {
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      right: 153px;
       inset-inline-end: 153px;
     }
   }

client/scss/components/_header.scss

@@ -25,9 +25,6 @@ header {
 
     > svg.icon {
       position: absolute;
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      left: -1.5em;
       inset-inline-start: -1.5em;
       top: 0.125em;
       max-width: 1em;
@@ -69,9 +66,6 @@ header {
     position: absolute;
     top: 0;
     height: 100%;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: 0.7em;
     inset-inline-start: 0.7em;
   }
 

client/scss/components/_help-block.scss

@@ -30,9 +30,6 @@
   .icon {
     @include svg-icon(1.25rem);
     position: absolute;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: 1.125rem;
     inset-inline-start: 1.125rem;
     top: 0.8125rem;
   }

client/scss/components/_listing.scss

@@ -61,9 +61,6 @@ ul.listing {
 
       &.icon:after {
         opacity: 0.5;
-        // Remove once we drop support for Safari 13.
-        // stylelint-disable-next-line property-disallowed-list
-        right: 0;
         inset-inline-end: 0;
       }
     }
@@ -476,9 +473,6 @@ table.listing {
       font-size: 1em;
       opacity: 1;
       position: absolute;
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      right: 10%;
       inset-inline-end: 10%;
       top: 2em;
     }

client/scss/components/_loading-mask.scss

@@ -13,14 +13,8 @@
     &:before {
       content: '';
       top: -5px;
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      left: -5px;
       inset-inline-start: -5px;
       bottom: -5px;
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      right: -5px;
       inset-inline-end: -5px;
       z-index: 1;
       background-color: rgba(255, 255, 255, 0.5);
@@ -31,9 +25,6 @@
       display: block;
       width: 1.875rem;
       height: 1.875rem;
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      left: 50%;
       inset-inline-start: 50%;
       top: 50%;
       animation: spin-wag 0.5s infinite linear;

client/scss/components/_modals.scss

@@ -26,14 +26,8 @@ $zindex-modal-background: 500;
   overflow-y: scroll;
   position: fixed;
   top: 0;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  right: 0;
   inset-inline-end: 0;
   bottom: 0;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  left: 0;
   inset-inline-start: 0;
   z-index: $zindex-modal-background;
 }
@@ -75,14 +69,8 @@ $zindex-modal-background: 500;
 .modal-backdrop {
   position: fixed;
   top: 0;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  right: 0;
   inset-inline-end: 0;
   bottom: 0;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  left: 0;
   inset-inline-start: 0;
   z-index: ($zindex-modal-background - 10);
   background-color: $color-black;
@@ -104,9 +92,6 @@ $zindex-modal-background: 500;
   width: 50px;
   height: 50px;
   top: 10px;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  right: 10px;
   inset-inline-end: 10px;
   z-index: 1;
 }

client/scss/components/_skiplink.scss

@@ -2,9 +2,6 @@
   display: block;
   position: fixed;
   top: -1000rem;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  left: 1rem;
   inset-inline-start: 1rem;
   z-index: 3000;
 

client/scss/components/_tooltips.scss

@@ -49,9 +49,6 @@
 
 .tooltip.top .tooltip-arrow {
   bottom: 0;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  left: 50%;
   inset-inline-start: 50%;
   margin-inline-start: -5px;
   border-top-color: #000;
@@ -60,18 +57,12 @@
 
 .tooltip.top-left .tooltip-arrow {
   bottom: 0;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  left: 5px;
   inset-inline-start: 5px;
   border-top-color: #000;
   border-width: 5px 5px 0;
 }
 
 .tooltip.top-right .tooltip-arrow {
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  right: 5px;
   inset-inline-end: 5px;
   bottom: 0;
   border-top-color: #000;
@@ -80,9 +71,6 @@
 
 .tooltip.right .tooltip-arrow {
   top: 50%;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  left: 0;
   inset-inline-start: 0;
   margin-top: -5px;
   border-inline-end-color: #000;
@@ -91,9 +79,6 @@
 
 .tooltip.left .tooltip-arrow {
   top: 50%;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  right: 0;
   inset-inline-end: 0;
   margin-top: -5px;
   border-inline-start-color: #000;
@@ -102,9 +87,6 @@
 
 .tooltip.bottom .tooltip-arrow {
   top: 0;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  left: 50%;
   inset-inline-start: 50%;
   margin-inline-start: -5px;
   border-bottom-color: #000;
@@ -113,9 +95,6 @@
 
 .tooltip.bottom-left .tooltip-arrow {
   top: 0;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  left: 5px;
   inset-inline-start: 5px;
   border-bottom-color: #000;
   border-width: 0 5px 5px;
@@ -123,9 +102,6 @@
 
 .tooltip.bottom-right .tooltip-arrow {
   top: 0;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  right: 5px;
   inset-inline-end: 5px;
   border-bottom-color: #000;
   border-width: 0 5px 5px;

client/scss/elements/_elements.scss

@@ -15,9 +15,6 @@ body {
     width: 100%;
     height: 100%;
     top: 0;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: 0;
     inset-inline-start: 0;
     z-index: 5;
     opacity: 0;

client/scss/elements/_forms.scss

@@ -167,9 +167,6 @@ input[type='radio']:before {
   text-align: center;
   position: absolute;
   top: 0.1875rem;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  left: 0.1875rem;
   inset-inline-start: 0.1875rem;
   cursor: pointer;
   display: block;
@@ -200,9 +197,6 @@ input[type='checkbox']:before {
   content: '';
   position: absolute;
   top: 2px;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  left: 2px;
   inset-inline-start: 2px;
   cursor: pointer;
   display: block;
@@ -219,9 +213,6 @@ input[type='checkbox']:checked:before {
   width: 1rem;
   height: 1rem;
   top: 2px;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  left: 2px;
   inset-inline-start: 2px;
 }
 

client/scss/objects/_avatar.scss

@@ -13,13 +13,7 @@
     position: absolute;
     z-index: 2;
     top: 0;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: 0;
     inset-inline-start: 0;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 0;
     inset-inline-end: 0;
     border: 0;
   }

client/scss/overrides/_utilities.dropdowns.scss

@@ -10,9 +10,6 @@
 
 .u-arrow--tl:before {
   bottom: 100%;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  left: 1rem;
   inset-inline-start: 1rem;
 }
 

client/scss/overrides/_vendor.datetimepicker.scss

@@ -20,9 +20,6 @@
 
   iframe {
     position: absolute;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: 0;
     inset-inline-start: 0;
     top: 0;
     width: 75px;
@@ -189,9 +186,6 @@
     > .xdsoft_select {
       border: 1px solid #ccc;
       position: absolute;
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      right: 0;
       inset-inline-end: 0;
       top: 30px;
       z-index: 101;
@@ -201,16 +195,10 @@
       overflow-y: hidden;
 
       &.xdsoft_monthselect {
-        // Remove once we drop support for Safari 13.
-        // stylelint-disable-next-line property-disallowed-list
-        right: -7px;
         inset-inline-end: -7px;
       }
 
       &.xdsoft_yearselect {
-        // Remove once we drop support for Safari 13.
-        // stylelint-disable-next-line property-disallowed-list
-        right: 2px;
         inset-inline-end: 2px;
       }
 
@@ -332,9 +320,6 @@
 .xdsoft_scrollbar {
   position: absolute;
   width: 7px;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  right: 0;
   inset-inline-end: 0;
   top: 0;
   bottom: 0;

client/src/components/CommentApp/components/Comment/style.scss

@@ -4,31 +4,21 @@
   width: calc(100vw - 40px);
   max-width: calc(100vw - 19%);
   display: block;
-  // Remove once we drop support for Safari 13.
-  transition: top 0.5s ease 0s, right 0.5s ease 0s,
-    inset-inline-end 0.5s ease 0s, height 0.5s ease 0s;
+  transition: top 0.5s ease 0s, inset-inline-end 0.5s ease 0s,
+    height 0.5s ease 0s;
   pointer-events: auto;
   box-sizing: border-box;
   padding-bottom: 0;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  right: -2000px;
   inset-inline-end: -2000px;
 
   @include media-breakpoint-up(sm) {
     width: calc(100vw - 40px);
     max-width: 400px;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: initial;
     inset-inline-start: initial;
   }
 
   @include media-breakpoint-up(md) {
     max-width: 200px;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 0;
     inset-inline-end: 0;
   }
 
@@ -37,15 +27,9 @@
   }
 
   &--focused {
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 35px;
     inset-inline-end: 35px;
 
     @include media-breakpoint-up(md) {
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      right: 50px;
       inset-inline-end: 50px;
     }
   }

client/src/components/CommentApp/components/CommentHeader/style.scss

@@ -25,9 +25,6 @@
 
   &__actions {
     position: absolute;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 0;
     inset-inline-end: 0;
   }
 
@@ -61,9 +58,6 @@
       svg {
         position: absolute;
         top: 7.5px;
-        // Remove once we drop support for Safari 13.
-        // stylelint-disable-next-line property-disallowed-list
-        left: 7.5px;
         inset-inline-start: 7.5px;
         width: 15px;
         height: 15px;
@@ -79,9 +73,6 @@
 
       > div {
         position: absolute;
-        // Remove once we drop support for Safari 13.
-        // stylelint-disable-next-line property-disallowed-list
-        right: 0;
         inset-inline-end: 0;
         top: 35px;
       }
@@ -116,9 +107,6 @@
       display: block;
       position: absolute;
       bottom: 100%;
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      right: 9px;
       inset-inline-end: 9px;
     }
 

client/src/components/CommentApp/main.scss

@@ -74,9 +74,6 @@ $box-padding: 10px;
   &__notice {
     background-color: $color-amber-1;
     position: absolute;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: -$box-padding;
     inset-inline-start: -$box-padding;
     bottom: 0;
     width: calc(100% + #{$box-padding} * 2);
@@ -144,9 +141,6 @@ $box-padding: 10px;
   width: 400px;
   position: absolute;
   top: 30px;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  right: 30px;
   inset-inline-end: 30px;
   z-index: 95;
   font-family: $font-sans;

client/src/components/Draftail/Tooltip/Tooltip.js

@@ -11,25 +11,19 @@ const getTooltipStyles = (target, direction) => {
   switch (direction) {
     case TOP:
       return {
-        'top': top + target.height,
-        // Remove once we drop support for Safari 13.
-        'left': left + target.width / 2,
-        'inset-inline-start': left + target.width / 2,
+        top: top + target.height,
+        insetInlineStart: left + target.width / 2,
       };
     case LEFT:
       return {
-        'top': top + target.height / 2,
-        // Remove once we drop support for Safari 13.
-        'left': left + target.width,
-        'inset-inline-start': left + target.width,
+        top: top + target.height / 2,
+        insetInlineStart: left + target.width,
       };
     case TOP_LEFT:
     default:
       return {
-        'top': top + target.height,
-        // Remove once we drop support for Safari 13.
-        'left': left,
-        'inset-inline-start': left,
+        top: top + target.height,
+        insetInlineStart: left,
       };
   }
 };

client/src/components/Draftail/Tooltip/Tooltip.scss

@@ -16,9 +16,6 @@ $tooltip-color-no: #f48880;
 
   &::before {
     bottom: 100%;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: 50%;
     inset-inline-start: 50%;
     transform: translateX(-50%);
     border-bottom-color: $tooltip-chrome;
@@ -31,9 +28,6 @@ $tooltip-color-no: #f48880;
 
   &::before {
     top: 50%;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 100%;
     inset-inline-end: 100%;
     transform: translateY(-50%);
     border-inline-end-color: $tooltip-chrome;
@@ -45,9 +39,6 @@ $tooltip-color-no: #f48880;
 
   &::before {
     bottom: 100%;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: $tooltip-arrow-spacing;
     inset-inline-start: $tooltip-arrow-spacing;
     border-bottom-color: $tooltip-chrome;
   }

client/src/components/Draftail/Tooltip/__snapshots__/Tooltip.test.js.snap

@@ -6,8 +6,7 @@ exports[`Tooltip #direction left 1`] = `
   role="tooltip"
   style={
     Object {
-      "inset-inline-start": 13,
-      "left": 13,
+      "insetInlineStart": 13,
       "top": 601,
     }
   }
@@ -22,8 +21,7 @@ exports[`Tooltip #direction top 1`] = `
   role="tooltip"
   style={
     Object {
-      "inset-inline-start": 7,
-      "left": 7,
+      "insetInlineStart": 7,
       "top": 1201,
     }
   }
@@ -38,8 +36,7 @@ exports[`Tooltip #direction top-left 1`] = `
   role="tooltip"
   style={
     Object {
-      "inset-inline-start": 1,
-      "left": 1,
+      "insetInlineStart": 1,
       "top": 1201,
     }
   }

client/src/components/Draftail/blocks/MediaBlock.scss

@@ -8,9 +8,6 @@
   &__icon-wrapper {
     position: absolute;
     top: 0;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 0;
     inset-inline-end: 0;
     background: $draftail-editor-chrome;
     color: $draftail-editor-chrome-text;

client/src/components/Draftail/blocks/__snapshots__/MediaBlock.test.js.snap

@@ -32,7 +32,7 @@ exports[`MediaBlock on click tooltip opens 1`] = `
   <div
     class="Tooltip Tooltip--top-left"
     role="tooltip"
-    style="top: 0px; left: 0px; inset-inline-start: 0;"
+    style="top: 0px; inset-inline-start: 0;"
   >
     <div
       style="max-width: 300px;"

client/src/components/PageExplorer/PageExplorer.scss

@@ -114,9 +114,6 @@ $explorer-header-horizontal-padding: 10px;
   &-icon {
     @apply w-text-primary;
     position: absolute;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 1rem;
     inset-inline-end: 1rem;
     top: 0.85rem;
     width: 1.25rem;

client/src/components/Sidebar/Sidebar.scss

@@ -3,9 +3,6 @@
 
   position: absolute;
   top: $sidebar-toggle-spacing;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  left: $sidebar-toggle-spacing;
   inset-inline-start: $sidebar-toggle-spacing;
   color: $color-white;
   width: $sidebar-toggle-size;
@@ -25,10 +22,6 @@
   @include media-breakpoint-up(sm) {
     position: static;
     inset-inline-end: $sidebar-toggle-spacing;
-
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: initial;
     inset-inline-start: initial;
   }
 
@@ -45,9 +38,6 @@
 .sidebar-loading {
   @apply w-fixed w-flex w-flex-col w-h-full w-bg-primary w-z-[300] w-transition-sidebar;
   width: $menu-width;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  left: 0;
   inset-inline-start: 0;
 
   @media (forced-colors: $media-forced-colours) {
@@ -66,9 +56,6 @@
 
   // The sidebar can move completely off-screen in mobile mode for extra room
   &--hidden {
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: -$menu-width;
     inset-inline-start: -$menu-width;
   }
 

client/src/components/Sidebar/SidebarPanel.scss

@@ -9,9 +9,6 @@
   height: 100vh;
   padding: 0;
   top: 0;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  left: 0;
   inset-inline-start: 0;
   z-index: 400;
   display: flex;
@@ -41,31 +38,19 @@
 
   @include media-breakpoint-up(sm) {
     @at-root .sidebar--slim #{&} {
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      left: $menu-width-slim;
       inset-inline-start: $menu-width-slim;
     }
     // Don't apply this to nested submenus though
     @at-root .sidebar--slim .sidebar-panel #{&} {
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      left: 0;
       inset-inline-start: 0;
     }
 
     &--open {
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      left: $menu-width;
       inset-inline-start: $menu-width;
       transform: translateX(0);
 
       // Don't apply this to nested submenus though
       @at-root .sidebar--slim .sidebar-panel #{&} {
-        // Remove once we drop support for Safari 13.
-        // stylelint-disable-next-line property-disallowed-list
-        left: $menu-width-slim;
         inset-inline-start: $menu-width-slim;
         transform: translateX(0);
       }

client/src/components/Sidebar/menu/MenuItem.scss

@@ -52,9 +52,6 @@
       font-size: 1.5em;
       margin: 0;
       position: absolute;
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      right: 0.5em;
       inset-inline-end: 0.5em;
       top: 0.5em;
     }

client/src/components/Sidebar/menu/SubMenuItem.scss

@@ -3,8 +3,6 @@
   display: block;
   width: 1rem;
   height: 1rem;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
   inset-inline-end: 15px;
   margin-inline-start: auto;
 
@@ -23,9 +21,6 @@
     width: 1rem;
     height: 1rem;
     position: absolute;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 0;
     inset-inline-end: 0;
   }
 }

client/tailwind.config.js

@@ -78,7 +78,7 @@ module.exports = {
       },
       transitionProperty: {
         sidebar:
-          'left, inset-inline-start, padding-inline-start, width, transform, margin-top, min-height',
+          'inset-inline-start, padding-inline-start, width, transform, margin-top, min-height',
       },
       zIndex: {
         header: '100',

docs/contributing/developing.md

@@ -193,7 +193,7 @@ Wagtail is meant to be used on a wide variety of devices and browsers. Supported
 | Firefox ESR   | Desktop    | Latest     |
 | Safari        | macOS      | Last 3     |
 
-We aim for Wagtail to work in those environments. Our development standards ensure that the site is usable on other browsers **and will work on future browsers**.
+We aim for Wagtail to work in those environments, there are known support gaps for Safari 13 introduced in Wagtail 4.0 to provide better support for RTL languages. Our development standards ensure that the site is usable on other browsers **and will work on future browsers**.
 
 IE 11 support has been officially dropped in 2.15 as it is gradually falling out of use. Features already known not to work include:
 

docs/releases/4.0.md

@@ -16,6 +16,7 @@ depth: 1
  * Add `base_url_path` to `ModelAdmin` so that the default URL structure of app_label/model_name can be overridden (Vu Pham, Khanh Hoang)
  * Add `full_url` to the API output of `ImageRenditionField` (Paarth Agarwal)
  * Use `InlinePanel`'s label when available for field comparison label (Sandil Ranasinghe)
+ * Drop support for Safari 13 by removing left/right positioning in favour of CSS logical properties (Thibaud Colas)
 
 ### Bug fixes
 
@@ -27,3 +28,9 @@ depth: 1
 ### `base_url_path` keyword argument added to AdminURLHelper
 
 The `wagtail.contrib.modeladmin.helpers.AdminURLHelper` class now accepts a `base_url_path` keyword argument on its constructor. Custom subclasses of this class should be updated to accept this keyword argument.
+
+
+### Dropped support for Safari 13
+
+Safari 13 will no longer be officially supported as of this release, this deviates the current support for the last 3 version of Safari by a few months and was required to add better support for RTL languages.
+

package-lock.json

@@ -12477,14 +12477,20 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001304",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001304.tgz",
-      "integrity": "sha512-bdsfZd6K6ap87AGqSHJP/s1V+U6Z5lyrcbBu3ovbCCf8cSYpwTtGrCBObMpJqwxfTbLW6YTIdbb1jEeTelcpYQ==",
+      "version": "1.0.30001339",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001339.tgz",
+      "integrity": "sha512-Es8PiVqCe+uXdms0Gu5xP5PF2bxLR7OBp3wUzUnuO7OHzhOfCyg3hdiGWVPVxhiuniOzng+hTc1u3fEQ0TlkSQ==",
       "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/browserslist"
-      }
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        }
+      ]
     },
     "node_modules/capture-exit": {
       "version": "2.0.0",
@@ -39316,9 +39322,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001304",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001304.tgz",
-      "integrity": "sha512-bdsfZd6K6ap87AGqSHJP/s1V+U6Z5lyrcbBu3ovbCCf8cSYpwTtGrCBObMpJqwxfTbLW6YTIdbb1jEeTelcpYQ==",
+      "version": "1.0.30001339",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001339.tgz",
+      "integrity": "sha512-Es8PiVqCe+uXdms0Gu5xP5PF2bxLR7OBp3wUzUnuO7OHzhOfCyg3hdiGWVPVxhiuniOzng+hTc1u3fEQ0TlkSQ==",
       "dev": true
     },
     "capture-exit": {

package.json

@@ -14,6 +14,7 @@
     "last 1 Firefox version",
     "last 2 iOS versions",
     "last 3 Safari versions",
+    "not safari 13",
     "not ie 11"
   ],
   "jest": {

wagtail/admin/static_src/wagtailadmin/scss/layouts/404.scss

@@ -4,9 +4,6 @@
 .page404__bg {
   position: fixed;
   top: 0;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  left: 0;
   inset-inline-start: 0;
   width: 100vw;
   height: 100vh;
@@ -18,9 +15,6 @@
 .page404__wrapper {
   position: absolute;
   top: 50%;
-  // Remove once we drop support for Safari 13.
-  // stylelint-disable-next-line property-disallowed-list
-  left: 50%;
   inset-inline-start: 50%;
   transform: translate(-50%, -50%);
   display: flex;

wagtail/admin/static_src/wagtailadmin/scss/layouts/home.scss

@@ -21,9 +21,6 @@ header {
     // make way for the nav-menu button on mobile
     @include media-breakpoint-down(xs) {
       position: relative;
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      left: $mobile-nav-indent;
       inset-inline-start: $mobile-nav-indent;
     }
   }

wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss

@@ -121,9 +121,6 @@ a.button {
   @include media-breakpoint-up(sm) {
     position: absolute;
     top: 139px;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 5%;
     inset-inline-end: 5%;
     padding: 0;
   }
@@ -196,9 +193,6 @@ a.button {
         width: 1em;
         height: 1em;
         padding: 0.3em;
-        // Remove once we drop support for Safari 13.
-        // stylelint-disable-next-line property-disallowed-list
-        left: $desktop-nice-padding;
         inset-inline-start: $desktop-nice-padding;
         margin-top: -1.1rem;
         top: 50%;

wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss

@@ -230,13 +230,7 @@
     font-weight: normal;
     position: absolute;
     top: 0;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: 0;
     inset-inline-start: 0;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 0;
     inset-inline-end: 0;
     z-index: 1;
     overflow: hidden;
@@ -263,9 +257,6 @@
       font-size: 2em;
       top: 0;
       line-height: 1.8em;
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      left: 0;
       inset-inline-start: 0;
       width: $desktop-nice-padding;
       color: $color-white;
@@ -385,9 +376,6 @@
       position: relative;
       z-index: 2;
       top: 0;
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      left: 0;
       inset-inline-start: 0;
       width: 3.3em;
       padding: 0;
@@ -651,9 +639,6 @@ footer .preview {
     color: $color-grey-3;
     position: absolute;
     top: 1.5em;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: calc(0.75em - 1px);
     inset-inline-start: calc(0.75em - 1px);
     height: 100%;
     border-inline-start: 2px dotted;

wagtail/admin/static_src/wagtailadmin/scss/userbar.scss

@@ -254,9 +254,6 @@ $positions: (
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      left: 14px;
       inset-inline-start: 14px;
     }
   }

wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss

@@ -24,18 +24,12 @@
     button.prepend-column,
     button.append-column {
       position: absolute;
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      left: -0.9rem;
       inset-inline-start: -0.9rem;
       top: -2rem;
     }
 
     button.delete-column {
       position: absolute;
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      right: 0.625rem;
       inset-inline-end: 0.625rem;
       top: 0.875rem;
     }
@@ -63,9 +57,6 @@
     border-top: 1px dotted $color-grey-2;
 
     button.prepend-row {
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      left: -2rem;
       inset-inline-start: -2rem;
       position: absolute;
       top: -0.9rem;
@@ -84,9 +75,6 @@
   ul.add-column-menu {
     position: absolute;
     top: 0;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: -0.9rem;
     inset-inline-start: -0.9rem;
     z-index: 100;
     min-width: 10rem;

wagtail/documents/static_src/wagtaildocs/scss/add-multiple.scss

@@ -12,9 +12,6 @@
     opacity: 0;
     position: absolute;
     top: 0;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 0;
     inset-inline-end: 0;
     direction: ltr;
     width: auto;

wagtail/images/static_src/wagtailimages/scss/add-multiple.scss

@@ -14,9 +14,6 @@
     opacity: 0;
     position: absolute;
     top: 0;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 0;
     inset-inline-end: 0;
     direction: ltr;
     width: auto;
@@ -70,27 +67,15 @@
     box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.4);
     z-index: 4;
     top: 60%;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: 20%;
     inset-inline-start: 20%;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 20%;
     inset-inline-end: 20%;
     width: 60%;
   }
 
   .thumb {
     top: 0;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 0;
     inset-inline-end: 0;
     bottom: 0;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: 0;
     inset-inline-start: 0;
     z-index: 1;
     width: 100%;
@@ -99,13 +84,7 @@
   .thumb:before,
   canvas,
   img {
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: 0;
     inset-inline-start: 0;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 0;
     inset-inline-end: 0;
     top: 0;
     bottom: 0;

wagtail/project_template/home/static/css/welcome_page.css

@@ -133,9 +133,6 @@ svg:not(:root) {
     padding: 5px;
     border-radius: 100%;
     top: 10px;
-    /* Remove once we drop support for Safari 13. */
-    /* stylelint-disable-next-line property-disallowed-list */
-    left: 0;
     inset-inline-start: 0;
     position: absolute;
 }