diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index 689b802153..0c76ee544c 100644 --- a/app/assets/stylesheets/base.css +++ b/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 */ diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 89638fc12d..5f15dc2788 100644 --- a/app/assets/stylesheets/buttons.css +++ b/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 { diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 7cb14e15be..e2b576058f 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/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); } }