Browse Source

perf(ui): optimize transition timing and keyboard viewport coordination

Adjust the global section overlay transition duration and easing for a
snappier feel. Update the viewport coordinator to use a more responsive
keyboard threshold and provide a fallback default height to ensure
consistent lifting behavior when the last known height is insufficient.
master
mortezaei 5 days ago
parent
commit
17a0db24fa
  1. 2
      src/app/globals.css
  2. 14
      src/components/Componentes/question-viewport-coordinator.ts

2
src/app/globals.css

@ -351,7 +351,7 @@ body.section-overlay-open .app-shell {
calc(var(--question-lift-y, 0px) * -1), calc(var(--question-lift-y, 0px) * -1),
0 0
); );
transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform; will-change: transform;
} }

14
src/components/Componentes/question-viewport-coordinator.ts

@ -3,7 +3,8 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { viewPaddingsBridge } from "@/lib/view-paddings"; import { viewPaddingsBridge } from "@/lib/view-paddings";
const KEYBOARD_THRESHOLD = 80;
const KEYBOARD_THRESHOLD = 40;
const DEFAULT_KEYBOARD_HEIGHT = 280;
const QUESTION_GAP = 16; const QUESTION_GAP = 16;
const LIFT_VARIABLE = "--question-lift-y"; const LIFT_VARIABLE = "--question-lift-y";
@ -194,10 +195,13 @@ export function useQuestionViewportCoordinator() {
if (!isActiveQuestionKeyboardInput(event.target)) return; if (!isActiveQuestionKeyboardInput(event.target)) return;
activeQuestionInput = event.target; activeQuestionInput = event.target;
// Start with the last known keyboard geometry so lifting begins in the
// same frame as focus; Flutter then replaces it with the exact height.
if (!keyboardVisible && lastKeyboardHeight > KEYBOARD_THRESHOLD) {
keyboardHeight = lastKeyboardHeight;
// Start with the last known keyboard geometry or standard default so lifting begins in the
// same frame as focus; Flutter/visualViewport then replaces it with the exact height.
if (!keyboardVisible) {
keyboardHeight =
lastKeyboardHeight > KEYBOARD_THRESHOLD
? lastKeyboardHeight
: DEFAULT_KEYBOARD_HEIGHT;
keyboardVisible = true; keyboardVisible = true;
} }
scheduleLiftUpdate(); scheduleLiftUpdate();

Loading…
Cancel
Save