Release/new

src/components/NavigationStackScene.tsx

@@ -33,18 +33,6 @@ export interface NavigationStackSceneProps {
   animationEasing?: string;
   /** Stagger-based delay in milliseconds (`spec.stagger × sceneIndex`). */
   animationDelay?: number;
-  /**
-   * Inline `transform` fallback matching the animation's `from` keyframe.
-   * Applied only on entering scenes so the element starts at the correct off-screen
-   * position during the brief window before `@keyframes` registers in the cascade.
-   * The running animation always overrides this via the animation value layer.
-   */
-  animationFromTransform?: string;
-  /**
-   * Inline `opacity` fallback matching the animation's `from` keyframe.
-   * Same purpose as `animationFromTransform`.
-   */
-  animationFromOpacity?: number;
   /** When true, applies `overflow: hidden` to clip scene content during the transition. */
   clipContent?: boolean;
   children?: ReactNode;
@@ -81,8 +69,6 @@ export function NavigationStackScene(
     pointerEvents: props.isActive ? 'auto' : 'none',
     visibility: props.isActive || props.transitionState ? 'visible' : 'hidden',
     overflow: props.clipContent ? 'hidden' : undefined,
-    transform: props.animationFromTransform,
-    opacity: props.animationFromOpacity,
     animation: props.animationName
       ? `${props.animationName} ${duration}ms ${easing} ${delay}ms both`
       : undefined,

src/components/NavigationStackViewport.tsx

@@ -334,8 +334,6 @@ export function NavigationStackViewport(
           delay: number;
           easing: string;
           clip: boolean;
-          fromTransform: string | undefined;
-          fromOpacity: number | undefined;
         }
       >(),
     };
@@ -355,8 +353,6 @@ export function NavigationStackViewport(
         delay: number;
         easing: string;
         clip: boolean;
-        fromTransform: string | undefined;
-        fromOpacity: number | undefined;
       }
     >();
 
@@ -395,19 +391,13 @@ export function NavigationStackViewport(
           delay: keyframeResult.delay,
           easing,
           clip: !!spec.clip,
-          fromTransform:
-            phase === 'enter' ? keyframeResult.fromTransform : undefined,
-          fromOpacity:
-            phase === 'enter' ? keyframeResult.fromOpacity : undefined,
         });
       } else {
         animations.set(entry.key, {
           name: undefined,
           delay: 0,
           easing,
           clip: !!spec.clip,
-          fromTransform: undefined,
-          fromOpacity: undefined,
         });
       }
     });
@@ -433,7 +423,7 @@ export function NavigationStackViewport(
   const overflowStyle =
     (state.isTransitioning && state.transition?.spec.clip) ||
     overflowBehavior === 'clip'
-      ? 'hidden'
+      ? 'clip'
       : 'visible';
 
   if (renderableEntries.length === 0) {
@@ -524,8 +514,6 @@ export function NavigationStackViewport(
               animationName={anim?.name}
               animationEasing={anim?.easing}
               animationDelay={anim?.delay}
-              animationFromTransform={anim?.fromTransform}
-              animationFromOpacity={anim?.fromOpacity}
               clipContent={anim?.clip}
             >
               {isActive || state.isTransitioning ? (

src/transitions/buildAnimationKeyframes.ts

@@ -13,17 +13,6 @@ export interface AnimationKeyframeResult {
   css: string;
   /** Animation delay in milliseconds (derived from spec.stagger × sceneIndex). */
   delay: number;
-  /**
-   * CSS `transform` value of the animation's `from` keyframe (e.g. `"translateX(100%)"`).
-   * Apply as an inline style fallback on the entering scene so it starts at the correct
-   * off-screen position during the brief window before @keyframes registers in the cascade.
-   */
-  fromTransform: string | undefined;
-  /**
-   * CSS `opacity` value of the animation's `from` keyframe.
-   * Apply as an inline style fallback on the entering scene for the same reason.
-   */
-  fromOpacity: number | undefined;
 }
 
 function negateValue(value: number | string): number | string {
@@ -283,11 +272,5 @@ export function buildAnimationKeyframes(
     `}`,
   ].join('\n');
 
-  return {
-    name,
-    css,
-    delay,
-    fromTransform: hasTranslate || hasScale ? fromTransform : undefined,
-    fromOpacity: hasOpacity ? opacityFrom : undefined,
-  };
+  return { name, css, delay };
 }