Масштабирование проблемы с -webkit-transform с мобильным сафари на iPad

На странице ниже, я масштабирую блок с помощью -webkit-transform. Преобразование масштабирует блок от его первоначального размера до его двойного размера.Масштабирование проблемы с -webkit-transform с мобильным сафари на iPad

Это работает так, как ожидается, с Safari и Chrome OSX.

Но, на IPad (как симуляторе, так и устройстве), масштабирование начинается с одной точки вместо исходного размера изображения.

Как вы можете видеть в примере, я установил метатег viewport, но он ничего не делает.

Может кто-нибудь подтвердить это как ошибку, и есть ли обходной путь?

<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>

источник

2010-09-17 andersjanmyr

Мне удалось решить проблему самостоятельно.

Решение простое: просто убедитесь, что элемент масштабируется до первоначального размера, чтобы начать с:

-webkit-transform: scale(1);

Существует одна хитрость к этому, хотя. Если вы, как я ниже, добавить класс к элементу, выбранному #ID, то #id имеет более высокий приоритет, чем класс, и он не будет отображаться, если не сказать браузеру, что это важно

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

Альтернативным способ решить этот вопрос - не выбирать элемент #id, а классом (.block) или элементом (div). Все, что имеет более низкий приоритет, чем идентификатор.

Решение следующее:

<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>

источник

2010-09-20 09:01:55 andersjanmyr

Это сделало такую разницу, просто добавив масштаб (1), спасибо, сэр! –

Только то, что я искал. Спасибо. – mapr

для меня добавление шкалы 1 не было решением, но мое начальное и конечное состояние имело преобразование без -webkit перед ним. Поэтому ваш пост помог мне понять это. – Mattijs

Я наткнулся на этот вопрос очень поздно. Решение было выполнено без использования important и путем изменения способа выбора элемента. Это связано с тем, что селектор ID более приближен и эффективен, чем селектор класса.

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

источник

2017-03-10 19:03:43

Масштабирование проблемы с -webkit-transform с мобильным сафари на iPad

ответ

Смежные вопросы