fix: survey scroll-to-top on mobile using scrollIntoView
Mobile browsers (iOS Safari especially) ignore window.scrollTo. Use scrollIntoView on a ref at the top of the page instead, which works reliably across mobile and desktop browsers. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -186,18 +186,26 @@ export default function SurveyPage() {
|
|||||||
}, 0)
|
}, 0)
|
||||||
const progressPct = Math.round((answeredCount / TOTAL_QUESTIONS) * 100)
|
const progressPct = Math.round((answeredCount / TOTAL_QUESTIONS) * 100)
|
||||||
|
|
||||||
|
const topRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
const goSlide = (idx: number) => {
|
const goSlide = (idx: number) => {
|
||||||
setCurrentSlide(idx)
|
setCurrentSlide(idx)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Scroll to top whenever the active slide changes
|
// Scroll to top whenever the active slide changes — mobile browsers
|
||||||
|
// (especially iOS Safari) ignore window.scrollTo, so we use
|
||||||
|
// scrollIntoView on a ref at the top of the page as primary method
|
||||||
const isFirstRender = useRef(true)
|
const isFirstRender = useRef(true)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isFirstRender.current) {
|
if (isFirstRender.current) {
|
||||||
isFirstRender.current = false
|
isFirstRender.current = false
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
if (topRef.current) {
|
||||||
|
topRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||||
|
} else {
|
||||||
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||||
|
}
|
||||||
}, [currentSlide])
|
}, [currentSlide])
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
const handleSubmit = async () => {
|
||||||
@@ -296,7 +304,7 @@ export default function SurveyPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-background text-foreground">
|
<div ref={topRef} className="min-h-screen bg-background text-foreground">
|
||||||
<PageMeta
|
<PageMeta
|
||||||
title="Product Survey"
|
title="Product Survey"
|
||||||
description="Help shape the future of ResolutionFlow by sharing your feedback"
|
description="Help shape the future of ResolutionFlow by sharing your feedback"
|
||||||
|
|||||||
Reference in New Issue
Block a user