Problem z skalowaniem za pomocą opcji -webkit-transform z mobilnym safari na iPadzie

Na stronie HTML poniżej skaluję blok z numerem -webkit-transform. Transformacja skaluje blok od początkowego rozmiaru do podwójnego rozmiaru.Problem z skalowaniem za pomocą opcji -webkit-transform z mobilnym safari na iPadzie

Działa to zgodnie z oczekiwaniami w przypadku przeglądarki Safari i przeglądarki Chrome w systemie OS X.

Jednak w iPadzie (zarówno symulatorze, jak i urządzeniu) skalowanie rozpoczyna się od pojedynczego punktu, a nie od pierwotnego rozmiaru obrazu.

Jak widać w przykładzie, ustawiłem metatam viewport, ale nic nie robi.

Czy ktoś może to potwierdzić jako błąd i czy istnieje obejście problemu?

<html> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0, minimum-scale=1.0" /> 

<style type="text/css"> 

#block { 
    position:absolute; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 400px; 
    -webkit-transition: -webkit-transform 3s ease-out; 
    background-color: blue; 
    } 

.zoom { 
    -webkit-transform: scale(2); 
} 
</style> 
</head> 

<body> 
    <div id="block" onclick="className='zoom';">The Block</div> 
</body> 
</html>

Źródło

2010-09-17 andersjanmyr

Udało mi się rozwiązać problem sam.

Rozwiązanie jest proste: Po prostu upewnij się, że element jest skalowany do swojego pierwotnego rozmiaru, aby rozpocząć:

-webkit-transform: scale(1);

Jest jeszcze jedna sztuczka z nim, choć. Jeśli, tak jak poniżej, dodać klasę do elementu wybranego przez ID The ID ma wyższy priorytet niż klasa i nie pokaże chyba poinformować przeglądarkę, że ważne jest

-webkit-transform: scale(2) !important;

Alternatywny sposobem rozwiązania tego problemu jest nie wybieranie elementu przez #id, ale przez klasę (.block) lub element (div). Wszystko o niższym priorytecie niż identyfikator.

Rozwiązanie następuje:

<style type="text/css"> 

#block { 
    position:absolute; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 400px; 
    -webkit-transition: -webkit-transform 3s ease-out; 
    background-color: blue; 
    -webkit-transform: scale(1); 
    } 

.zoom { 
    -webkit-transform: scale(2) !important; 
} 
</style> 
</head> 

<body> 
    <div id="block" onclick="className='zoom';">The Block</div> 
</body> 
</html>

Źródło

2010-09-20 09:01:55 andersjanmyr

To spowodowało taką różnicę, po prostu dodanie skali (1), dziękuję, proszę pana! –

Właśnie tego szukałem. Dzięki wielkie. – mapr

dla mnie dodanie skali 1 nie było rozwiązaniem, ale mój stan początkowy i końcowy miał transformację bez -webkit przed nią. Twój post pomógł mi to zrozumieć. – Mattijs

natknąłem to pytanie bardzo późno. Rozwiązanie było bez użycia important i poprzez zmianę sposobu wybierania elementu. Wynika to z powodu, że selektor ID jest bardziej bliższy i potężniejszy niż selektor klasy.

#block.zoom { 
    -webkit-transform: scale(2); 
}

Źródło

2017-03-10 19:03:43

Problem z skalowaniem za pomocą opcji -webkit-transform z mobilnym safari na iPadzie

Odpowiedz

Powiązane problemy