web-dev-qa-db-ja.com

Chrome値が空の場合のHTML入力カーソル位置の問題

つい最近、Google Chromeでテキストが空の場合にのみ、テキストの入力に表示の問題があることに気付きました。

上の画像で、入力が空のときに、テキスト入力内のカーソルが高すぎることに注意してください。

Cursor issue in Chrome

しかし、テキストを入力すると、それ自体が修正されます。

Password input

JSFiddle Googleが必要になる場合がありますChromeバージョン：38.0.2125.101 m

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);
}
htmlcssgoogle-chromehtml-input
34
Le-roy Staines

原因：

これは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%は、より期待される動作をもたらします。

35
Le-roy Staines

line-height:100%seemsを追加して問題を修正します：

http://jsfiddle.net/ddjj9wxc/

8
strada

私はline-heightをまったく使用しないことをお勧めします、それは適切な答えではないかもしれませんが、私のために働いています（最新のクロム）

更新されたフィドルhttp://jsfiddle.net/efgq1svz/11/

6
Manjunath Siddappa

テキスト入力のCSSスタイルをline-height: 46pxからline-height: 1emに変更すると、問題が解決します。しかし、その理由は定かではありません。

0
Le-roy Staines

私は当時同じ問題を抱えていましたが、IOS 8.1のみでしたので、おそらく私の解決策は誰かを助けるでしょう。この問題は変換CSSプロパティを設定したdivタグから生じました。次のコード：

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

2012年に、HTML5キャンバスWebアプリを作成し、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ビット）」ですが、数日前に https：/から最新の公式Chromium Linux「バージョン42.0.2287.0（64ビット）」を試しました/download-chromium.appspot.com/ で、バグは表示されませんでした。

私のWebアプリはこちらです http://drawcode.eu/projects/connect-points/ 、ポイントを接続する必要がありますが、UbuntuのChromiumでは、ポイントの真ん中の下の20ピクセルをクリックする必要があります。これはカーソル位置の問題なので、私の問題はこのスレッドに関連していると思います。

誰かがバグを持っていることを確認し、それが本当に修正されたときから知ることができますか？ダウンロードした最新の公式Chromiumはバージョン42（非安定）であることに注意してください。 UbuntuのChromium 40にはまだバグがありますが、@ Salmonfaceはバージョン40で修正されたと言いました HTML入力カーソル位置の問題Chrome値が空の場合

編集：Debianでは、Chromium 37（38ではなく）でもこのバグがありました！バグはまだここにありますChrome beta（バージョン41）。ここにFiddle 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（開発者ビルド261001でテスト済み）は、Fiddle Iを共有しましたが、ブラウザーでは、カーソル位置が良好または誤っているdivのテキストを選択できます。Chromium37から（開発者ビルド271001でテスト済み）Chromium 41では、Fiddleのカーソル位置が適切なテキストを選択できません。

バグはGNU/Linuxプラットフォームだけではなく、Windows 8仮想マシンでも発生します。

0
baptx

同様の問題が発生しました。しかし、length（px、emまたはrem）の代わりにline-heightに数値を使用する方が良いことがわかりました。次のコードを使用してこの問題を解決する可能性があります。

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

さらに、おそらく、上記のcssは、目的のレンダリング効果のために-webkit-appaearance: noneとペアにする必要があります。とにかく、これは私のために働く。

0
lute

私が見ることができるように誰も言及していない別のハックがあります。 @mediaクエリを使用してChromeをチェックアウトできます。

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