input field and css transform scale is not working properly in chrome

StackOverflow https://stackoverflow.com/questions/20432374

Question

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.

No correct solution

OTHER TIPS

I changed your example just removing the css(height) and everything went as expected - no error

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top