Шкала преобразования CSS на элементе ввода перемещает текст значения за пределы контейнера, когда свойство высоты не авто.Поле ввода и масштаб преобразования css не работают должным образом в chrome
Но с масштабом3d кажется ОК. Я смог повторить его в Chromium (30.0.1599.114) и Chrome (31.0.1650.63), возможно, это ошибка webkit.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-2.0.2.js"></script>
<style>
.phone-first { height: 30px; }
</style>
</head>
<body>
<input class="phone-first" type="text" name="phone" value="+71231231213">
<br><br><br>
<input class="phone-second" type="text" name="phone" value="+71231231213">
<br><br><br>
<a href="#" class="p">scale 2</a>
<br>
<a href="#" class="m">scale 1</a>
<br><br><br>
<a href="#" class="p3d">scale3d 2</a>
<br>
<a href="#" class="m3d">scale3d 1</a>
<script>
var $phone = $('.phone-first, .phone-second');
$('.p').click(function() { $phone.css('transform', 'scale(2, 2)'); });
$('.m').click(function() { $phone.css('transform', 'scale(1, 1)'); });
$('.p3d').click(function() { $phone.css('transform', 'scale3d(2, 2, 2)'); });
$('.m3d').click(function() { $phone.css('transform', 'scale3d(1, 1, 1)'); });
</script>
</body>
</html>
http://jsfiddle.net/j67H3/ - вот пример.
Любое обходное решение или дополнительная информация об этом? Я что-то упускаю?
Спасибо.
Идея не существует. Хороший вопрос. Я попытался запустить его в Mozilla, но, похоже, я вижу ошибки совместимости. –
@MrLister, какая у вас ошибка? Нужна дополнительная информация. Я тестировал в Firefox current, все в порядке. – Fillo
Извините, я, по-видимому, имел adblocked скрипты на jsFiddle.net по ошибке. Теперь все в порядке. –