HTML Ввод позиции курсора в Chrome, когда значение пустое

Совсем недавно я заметил, что текстовые входы имеют проблему с отображением в Google Chrome, но только тогда, когда текст пуст.

Обратите внимание, что в верхнем изображении, когда вход пуст, курсор слишком высок в текстовом входе.

Но как только мы набираем текст, он сам исправляет:

JSFiddle, чтобы проиллюстрировать. Может потребоваться версия Google Chrome: 38.0.2125.101 м

HTML:

<input name="tb_password" type="password" id="tb_password" class=" validate[required,custom[password]]" placeholder="Type your password here" autocomplete="off" style="
    margin: 0;
    line-height: 46px;
">

CSS

input[type="text"], input[type="password"] {
width: 100%;
height: 46px;
line-height: 46px;
font-size: 11pt;
color: #555 !important;
text-indent: 15px;
border-top: solid 1px #c5c5c5;
border-left: solid 1px #c5c5c5;
border-bottom: solid 1px #dadada;
border-right: solid 1px #dadada;
background: #fff;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, .1);
box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, .1);
}

Ответ 1

Причина:

Похоже, это ошибка регрессии в двигателе Chromium 38. Я могу воспроизвести в Chrome 38. * и Opera 25. * (который использует Chromium 38).

Сообщенные ошибки/с:

Как указано @JackieChiles, это регрессия этой ошибки [закрыта как обнуление]: https://code.google.com/p/chromium/issues/detail?id=47284

Как было предложено в закрытой ошибке, я зарегистрировал новую. https://code.google.com/p/chromium/issues/detail?id=426802&thanks=426802&ts=1414143535

И также ссылаются на другую сообщенную ошибку, которая, как представляется, выделяет ту же ошибку, но не может определить точную проблему в общем виде. https://code.google.com/p/chromium/issues/detail?id=394664

Обход проблемы:

Как описано в других ответах выше, обходной путь заключается в том, чтобы избежать использования атрибута line-height на основе пикселя. Например, замена line-height:50px на line-height:1em или line-height:100% приведет к более ожидаемому поведению.

Ответ 2

Добавление line-height:100% похоже на проблему:

http://jsfiddle.net/ddjj9wxc/

Ответ 3

Я предлагаю не использовать line-height вообще, это может быть не правильный ответ, а его работа для меня (последний хром)

Обновлена скрипка http://jsfiddle.net/efgq1svz/11/

Ответ 4

Изменение стиля CSS на текстовом входе от line-height: 46px до line-height: 1em устраняет проблему; однако я не уверен, почему.

Ответ 5

Есть еще один хак, о котором никто не упоминал, как я вижу. Вы можете использовать запрос @media, чтобы проверить Chrome:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    line-height: normal;
}

Ответ 6

Я столкнулся с подобной проблемой. Но мне лучше было использовать число для line-height вместо длины (px, em или rem). Возможно, используя следующий код исправить эту проблему:

input[type="text"] {
  height: 46px;
  line-height: 1.1;
}

Плюс, возможно, css выше нужно соединить с -webkit-appaearance: none для желаемого эффекта рендеринга. Во всяком случае, это работает для меня.

Ответ 7

В 2012 году я создал веб-приложение canvas HTML5 и использовал свойство CSS3 для изменения положения курсора при использовании изображения в качестве курсора:

#canvas { cursor: url(../image/pen_red_ff0000.gif)0 20, auto; }

Он работал в течение нескольких месяцев при разработке моего проекта в Firefox, Chrome/Chromium и других браузерах, но, по крайней мере, с Chrome 38, изменение позиции курсора было проигнорировано. Я использую версию Chromium Ubuntu, и сегодня я обновил Chromium 40, и ошибка все еще здесь, даже после перезагрузки и удаления ".config/chromium".

Версия из пакетов Ubuntu - "Версия 40.0.2214.94 Ubuntu 14.04 (64-разрядная версия)", но несколько дней назад я попробовал последнюю версию Chromium Linux "Версия 42.0.2287.0 (64-разрядная версия)" из https://download-chromium.appspot.com/, и ошибка не появилась.

Мое веб-приложение здесь http://drawcode.eu/projects/connect-points/, вам нужно подключать точки, но на Chromium от Ubuntu, я должен нажать 20 пикселей под середина точек. Это проблема с курсором, поэтому я думаю, что моя проблема связана с этим потоком.

Может кто-нибудь подтвердить наличие ошибки и узнать, когда это действительно исправлено? Обратите внимание, что последний официальный Chromium, который я загрузил, - это версия 42 (нестабильная). У моего Chromium 40 у Ubuntu все еще есть ошибка, но @Salmonface заявила, что исправлена в версии 40 HTML-позиция курсора на курсор в Chrome, когда значение пуст

Изменить: В Debian у меня была эта ошибка с Chromium 37 (а не 38)! Ошибка все еще присутствует в бета-версии Chrome (версия 41). Вот сценарий http://jsfiddle.net/baptx/L0fmvs7a/

Изменить 2: на самом деле ошибка положения курсора CSS3 появилась в Chromium 25 (https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Linux_x64/171003/) и, по-видимому, исправлена в Chromium 42 (https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Linux_x64/313000/), вы можете попробовать самостоятельно мое приложение холста HTML5 и увидеть, что позиция курсора CSS3 неверна. От Chromium 25 до Chromium 36 (проверено с помощью разработчика build 261001), Fiddle я shared работает, но браузер позволяет вам выбирать текст в div с хорошей или неправильной позицией курсора. Из Chromium 37 (проверено с помощью разработчика 271001) в Chromium 41 вы не можете выбрать текст с хорошей позицией курсора на Fiddle.

Ошибка не только для платформы GNU/Linux, она также появляется на виртуальной машине Windows 8.

Ответ 8

У меня была такая же проблема в те дни, но только на IOS 8.1, поэтому, возможно, мое решение поможет кому-то. Проблема возникла из тега div, который установил свойство CSS преобразования. Я решаю проблему со следующим кодом:

#your-parent-div {
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
}