プレゼンテーション用のスライドを作成できるリッチ Web クライアントを作成しています。機能の 1 つは、画面に合わせてページをズームする機能です。そのために CSS 変換を使用します。小さなラップトップ画面ではズームアウトします。ただし、私の contentEditable テキスト ボックスは、これらの場合に点滅するキャレットを失い始めます (スケール 0.7 あたりから始まり、ズームアウトするほど悪化します)。
この単純化されたケースを確認してください。
<!DOCTYPE html>
<html><head>
<style type="text/css">
div {
border: 1px solid gray;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-o-transform: scale(0.7);
transform: scale(0.7);
}
</style>
</head><body>
<div contenteditable="true">The quick brown fox jumps over the lazy dog</div>
</body></html>
または jsfiddle で: http://jsfiddle.net/5wJGg/3/
一番左の文字をクリックし、キーボードの右矢印キーを使用してすべての文字を移動します。毎回キャレットが点滅するのを待ちます。
- Google Chrome: キャレットは常に表示されます。
- Firefox 20: 一部の文字の間にキャレットが表示されません。
- IE 9: 一部の文字の間にキャレットが表示されません。
- IE 10: キャレットは常に表示されます。
- Safari (Mac): キャレットは常に表示されます
Google Chrome/Safari で 2px 幅のキャレットが灰色で描画されることがあることに気付きました。
これは Firefox と IE のサブピクセル レンダリングのバグですか? 回避策はありますか? CSSでキャレットのスタイリングが出来ないので、SOLかもしれません。
[編集] Windows 8 の IE 10 でこれをテストしました。キャレットは常に表示されます。サブピクセルの問題が発生すると、キャレットが太く灰色で表示されるため、修正された IE 9 のバグと Firefox の未解決のバグのように見えます。