2013-12-06 4 views
1

Шкала преобразования 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/ - вот пример.

Любое обходное решение или дополнительная информация об этом? Я что-то упускаю?

Спасибо.

+0

Идея не существует. Хороший вопрос. Я попытался запустить его в Mozilla, но, похоже, я вижу ошибки совместимости. –

+0

@MrLister, какая у вас ошибка? Нужна дополнительная информация. Я тестировал в Firefox current, все в порядке. – Fillo

+0

Извините, я, по-видимому, имел adblocked скрипты на jsFiddle.net по ошибке. Теперь все в порядке. –

ответ

0

Я изменил ваш пример, просто удалив css (высота), и все прошло как ожидалось - нет ошибки

+0

Да, это правда. Но что, если мне нужна нестандартная высота? .. Итак, https://code.google.com/p/chromium/issues/detail?id=327023&thanks=327023&ts=1386610783 Я думаю, что это ошибка хрома/хрома , – Fillo

+0

ai не знаю, что сказать вам, потому что я не нашел другого решения –