common: fix modal animation on mobile & tweak some transition & animation css

js/dist/forum.js

@@ -15608,7 +15608,12 @@ var ModalManager = /*#__PURE__*/function (_Component) {
 
     micromodal__WEBPACK_IMPORTED_MODULE_1__["default"].show('Modal', {
       awaitCloseAnimation: true,
+      awaitOpenAnimation: true,
+      onShow: function onShow() {
+        return $('body').addClass('modal-open');
+      },
       onClose: function onClose() {
+        $('body').removeClass('modal-open');
         var backdrop = $('.modal-backdrop');
         backdrop.fadeOut(200, function () {
           backdrop.remove();

js/src/common/components/ModalManager.tsx

@@ -58,7 +58,11 @@ export default class ModalManager extends Component {
 
         MicroModal.show('Modal', {
             awaitCloseAnimation: true,
+            awaitOpenAnimation: true,
+            onShow: () => $('body').addClass('modal-open'),
             onClose: () => {
+                $('body').removeClass('modal-open');
+
                 const backdrop = $('.modal-backdrop');
 
                 backdrop.fadeOut(200, () => {

less/common/Modal.less

@@ -142,13 +142,17 @@
     bottom: 0;
     top: 0;
     overflow: auto;
+    will-change: transform;
+    animation: none !important;
+    display: block;
     .transition-transform(0.2s);
     .translate3d(0, 100vh, 0);
 
-    &.in {
-      -webkit-transform: none !important;
-              transform: none !important;
+    &[aria-hidden="false"] {
+      -webkit-transform: none;
+              transform: none;
     }
+
     &:before {
       content: " ";
       .header-background();