Transform：translateXはChromeの入力でテキスト選択を解除します

Question

TranslateXはChromeの入力でテキスト選択を解除します。

div { 
    background: #afe5a4; 
    padding: 20px; 
    width: 300px; 
    transform:translateX(150px); 
} 

input { 
    width: 100%; 
} 

デモ：

https://jsfiddle.net/k42g91h1/1/

入力中のテキストを選択し、左側にある緑色のボックスの外側にカーソルを移動してください。 奇妙なテキストがどのように選択されているかがわかります。

これを修正するにはどうすればよいですか？

Answer 1

これは奇妙なバグです。私はどのように、そしてなぜあなたがtranslateXを使用しているのかわからないが、基本的にブラウザが入力を実際にどこかにあると考えるようにブラウザを欺くことができる。translateXあなたのdivが持っている値とマージンを同じに設定する。

input { 
    width: 100%; 
    transform:translateX(-150px); 
    margin-left: 150px; 
} 

フィドル：https://jsfiddle.net/72zx4tw0/