CSS transform scale on input element moves value text beyond the container when height property is not auto.
But with scale3d it seems like ok. I was able to repeat it in Chromium (30.0.1599.114) and Chrome (31.0.1650.63), maybe it is webkit bug.
<!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/ - here is an example.
Any workaround or more info about this? Am I missing something?
Thanks.
I changed your example just removing the css(height) and everything went as expected - no error