From 659d2a08404a08c2f148626fc3db44d807ba9a39 Mon Sep 17 00:00:00 2001 From: 3dtours Date: Thu, 18 Jun 2026 21:24:08 +0700 Subject: [PATCH] =?UTF-8?q?fix:=20hi=E1=BB=83n=20th=E1=BB=8B=20market=20ch?= =?UTF-8?q?=E1=BB=89=20h=C6=B0=E1=BB=9Bng=20ng=C6=B0=E1=BB=9Di=20d=C3=B9ng?= =?UTF-8?q?=20di=20chuy=E1=BB=83n=20tr=C3=AAn=20iOS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/TourDetailPage.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/TourDetailPage.tsx b/frontend/src/pages/TourDetailPage.tsx index 7a16fda..2cc4d1f 100644 --- a/frontend/src/pages/TourDetailPage.tsx +++ b/frontend/src/pages/TourDetailPage.tsx @@ -178,6 +178,10 @@ const MapRotationHandler = ({ rotation }: { rotation: number }) => { useEffect(() => { const container = map.getContainer(); + // Đảm bảo tâm xoay luôn ở giữa và kích hoạt tăng tốc phần cứng để giảm lag trên iOS + container.style.transformOrigin = 'center center'; + container.style.willChange = 'transform'; + if (rotation === 0) { cumulativeRotationRef.current = 0; prevRotationRef.current = 0; @@ -193,9 +197,11 @@ const MapRotationHandler = ({ rotation }: { rotation: number }) => { cumulativeRotationRef.current += delta; prevRotationRef.current = rotation; - // Áp dụng transform với giá trị cộng dồn liên tục - container.style.transform = `rotate(${cumulativeRotationRef.current}deg) scale(2.5)`; - container.style.transition = 'transform 0.1s linear'; + // Áp dụng transform với giá trị cộng dồn liên tục. + // 1. Dùng translateZ(0) để kích hoạt GPU trên iOS. + // 2. Giảm scale xuống ~1.6 (vừa đủ che góc) để giảm tải cho bộ nhớ đệm đồ họa. + container.style.transform = `rotate(${cumulativeRotationRef.current}deg) scale(2.2) translateZ(0)`; + container.style.transition = 'transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1)'; }, [rotation, map]); return null; };