Fixes for slide transitions (follow-up) (#1570)

src/components/ui/Tab.scss

@@ -29,8 +29,16 @@
     }
   }
 
-  &:not(&--active):hover {
+  @media (hover:hover) {
-    background: var(--color-interactive-element-hover);
+    &:not(&--active):hover {
+      background: var(--color-interactive-element-hover);
+    }
+  }
+
+  @media (max-width: 600px) {
+    &:not(&--active):active {
+      background: var(--color-interactive-element-hover);
+    }
   }
 
   > span {

src/components/ui/Tab.tsx

@@ -38,6 +38,11 @@ const Tab: FC<OwnProps> = ({
   const tabRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    // Set initial active state
+    if (isActive && previousActiveTab === undefined && tabRef.current) {
+      tabRef.current.classList.add(classNames.active);
+    }
+
     if (!isActive || previousActiveTab === undefined) {
       return;
     }

src/components/ui/Transition.scss

@@ -28,8 +28,11 @@
    */
   &.slide-optimized,
   &.slide-optimized-rtl {
-    // Create a new composite layer to reduce the page repaint area when switching a tab
+    contain: strict;
-    transform: translate3d(0, 0, 0);
+    body.is-safari & {
+      // Create a new composite layer to reduce the page repaint area when switching a tab (as `contain` is not supported in Safari)
+      transform: translate3d(0, 0, 0);
+    }
 
     #root & > div {
       position: absolute;

src/components/ui/Transition.tsx

@@ -260,7 +260,7 @@ const Transition: FC<TransitionProps> = ({
       ref={containerRef}
       id={id}
       className={buildClassName('Transition', className, name)}
-      teactFastList={!shouldCleanup}
+      teactFastList={!renderCount && !shouldCleanup}
     >
       {contents}
     </div>

src/modules/actions/ui/initial.ts

@@ -2,7 +2,7 @@ import { addReducer, getGlobal, setGlobal } from '../../../lib/teact/teactn';
 
 import { ANIMATION_LEVEL_MAX } from '../../../config';
 import {
-  IS_ANDROID, IS_IOS, IS_MAC_OS, IS_TOUCH_ENV,
+  IS_ANDROID, IS_IOS, IS_MAC_OS, IS_SAFARI, IS_TOUCH_ENV,
 } from '../../../util/environment';
 import { setLanguage } from '../../../util/langProvider';
 import switchTheme from '../../../util/switchTheme';
@@ -38,6 +38,9 @@ addReducer('init', (global) => {
   } else if (IS_MAC_OS) {
     document.body.classList.add('is-macos');
   }
+  if (IS_SAFARI) {
+    document.body.classList.add('is-safari');
+  }
 });
 
 addReducer('setIsUiReady', (global, actions, payload) => {