fix: hiển thị market chỉ hướng người dùng di chuyển trên iOS
This commit is contained in:
@@ -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;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user