Merge pull request #2451 from nqst/fix-safari-glitches

Fix Safari transition glitches

Author: andyra

app/assets/stylesheets/base.css

@@ -34,7 +34,7 @@
 
   :is(a, button, input, textarea, .switch, .btn) {
     transition: 100ms ease-out;
-    transition-property: background-color, border-color, box-shadow, filter, outline;
+    transition-property: background-color, border-color, box-shadow, outline;
     touch-action: manipulation;
 
     /* Keyboard navigation */

app/assets/stylesheets/buttons.css

@@ -19,7 +19,7 @@
     pointer-events: auto;
     position: relative;
     transition: 100ms ease-out;
-    transition-property: background-color, border, box-shadow, color, filter, opacity, scale;
+    transition-property: background-color, border, box-shadow, color, opacity, scale;
 
     @media (any-hover: hover) {
       &:hover {

app/assets/stylesheets/card-columns.css

@@ -185,15 +185,16 @@
   .cards__transition-container {
     block-size: 100%;
     border-radius: calc(var(--column-width-collapsed) / 2);
-    translate: 0 0.5ch; /* Allow a little room for the mini bubble */
+    margin-block-start: 0.5ch; /* Allow a little room for the mini bubble */
     transition: translate var(--column-transition-duration) var(--ease-out-overshoot-subtle);
 
     @media (min-width: 640px) {
       .is-expanded & {
-        translate: 0 0.5ch; /* Allow a little room for the mini bubble */
+        translate: 0; /* Animate back from collapsed state */
       }
 
       .is-collapsed & {
+        margin-block-start: 0;
         translate: 0 var(--column-width-collapsed);
       }
     }